m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00
Code

Onboarding v2: Implement requested metrics (#17090)

Browse Source
This commit is contained in:
David Walsh 2023-01-13 10:11:27 -06:00 committed by GitHub
parent 2027763e57
commit 72a1df247c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 200 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
shared/constants/metametrics.js
View File

@ -345,6 +345,25 @@ export const EVENT_NAMES = {
TOKEN_HIDDEN: 'Token Hidden',
TOKEN_IMPORT_CANCELED: 'Token Import Canceled',
TOKEN_IMPORT_CLICKED: 'Token Import Clicked',
ONBOARDING_WELCOME: 'App Installed',
ONBOARDING_WALLET_CREATION_STARTED: 'Wallet Setup Selected',
ONBOARDING_WALLET_IMPORT_STARTED: 'Wallet Import Started',
ONBOARDING_WALLET_CREATION_ATTEMPTED: 'Wallet Password Created',
ONBOARDING_WALLET_SECURITY_STARTED: 'SRP Backup Selected',
ONBOARDING_WALLET_SECURITY_SKIP_INITIATED: 'SRP Skip Backup Selected',
ONBOARDING_WALLET_SECURITY_SKIP_CONFIRMED: 'SRP Backup Skipped',
ONBOARDING_WALLET_SECURITY_SKIP_CANCELED: 'SRP Skip Backup Canceled',
ONBOARDING_WALLET_SECURITY_PHRASE_REVEALED: 'Key Material Revealed',
ONBOARDING_WALLET_SECURITY_PHRASE_WRITTEN_DOWN: 'SRP Backup Confirm Display',
ONBOARDING_WALLET_SECURITY_PHRASE_CONFIRMED: 'SRP Backup Confirmed',
ONBOARDING_WALLET_CREATION_COMPLETE: 'Wallet Created',
ONBOARDING_WALLET_IMPORT_COMPLETE: 'Wallet Imported',
ONBOARDING_WALLET_SETUP_COMPLETE: 'Application Opened',
ONBOARDING_WALLET_ADVANCED_SETTINGS: 'Settings Updated',
ONBOARDING_WALLET_IMPORT_ATTEMPTED: 'Wallet Import Attempted',
ONBOARDING_WALLET_METRICS_PREFENCE_SELECTED: 'Analytics Preferences Selected',
ONBOARDING_WALLET_VIDEO_PLAY: 'SRP Intro Video Played',
ONBOARDING_TWITTER_CLICK: 'External Link Clicked',
};
export const EVENT = {

10
ui/pages/onboarding-flow/create-password/create-password.js
View File

@ -138,6 +138,12 @@ export default function CreatePassword({
if (!isValid) {
return;
}
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_CREATION_ATTEMPTED,
});
// If secretRecoveryPhrase is defined we are in import wallet flow
if (
secretRecoveryPhrase &&
@ -151,10 +157,6 @@ export default function CreatePassword({
if (createNewAccount) {
await createNewAccount(password);
}
trackEvent({
event: EVENT_NAMES.ACCOUNT_PASSWORD_CREATED,
category: EVENT.CATEGORIES.ONBOARDING,
});
history.push(ONBOARDING_SECURE_YOUR_WALLET_ROUTE);
} catch (error) {
setPasswordError(error.message);

23
ui/pages/onboarding-flow/creation-successful/creation-successful.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import React, { useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Box from '../../../components/ui/box';
import Typography from '../../../components/ui/typography';
@ -16,10 +17,16 @@ import {
ONBOARDING_PRIVACY_SETTINGS_ROUTE,
} from '../../../helpers/constants/routes';
import { isBeta } from '../../../helpers/utils/build-types';
import { getFirstTimeFlowType } from '../../../selectors';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
import { MetaMetricsContext } from '../../../contexts/metametrics';
export default function CreationSuccessful() {
const history = useHistory();
const t = useI18nContext();
const trackEvent = useContext(MetaMetricsContext);
const firstTimeFlowType = useSelector(getFirstTimeFlowType);
return (
<div className="creation-successful" data-testid="creation-successful">
@ -93,7 +100,19 @@ export default function CreationSuccessful() {
type="primary"
large
rounded
onClick={() => history.push(ONBOARDING_PIN_EXTENSION_ROUTE)}
onClick={() => {
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event:
firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT
? EVENT_NAMES.ONBOARDING_WALLET_IMPORT_COMPLETE
: EVENT_NAMES.ONBOARDING_WALLET_CREATION_COMPLETE,
properties: {
method: firstTimeFlowType,
},
});
history.push(ONBOARDING_PIN_EXTENSION_ROUTE);
}}
>
{t('gotIt')}
</Button>

9
ui/pages/onboarding-flow/import-srp/import-srp.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
@ -19,6 +19,8 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import SrpInput from '../../../components/app/srp-input';
import { getCurrentKeyring } from '../../../selectors';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
export default function ImportSRP({ submitSecretRecoveryPhrase }) {
const [secretRecoveryPhrase, setSecretRecoveryPhrase] = useState('');
@ -31,6 +33,7 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
history.replace(ONBOARDING_CREATE_PASSWORD_ROUTE);
}
}, [currentKeyring, history]);
const trackEvent = useContext(MetaMetricsContext);
return (
<div className="import-srp" data-testid="import-srp">
@ -71,6 +74,10 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
large
onClick={() => {
submitSecretRecoveryPhrase(secretRecoveryPhrase);
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_SECURITY_PHRASE_CONFIRMED,
});
history.replace(ONBOARDING_CREATE_PASSWORD_ROUTE);
}}
disabled={!secretRecoveryPhrase.trim()}

10
ui/pages/onboarding-flow/metametrics/metametrics.js
View File

@ -43,10 +43,9 @@ export default function OnboardingMetametrics() {
trackEvent(
{
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.METRICS_OPT_IN,
event: EVENT_NAMES.ONBOARDING_WALLET_METRICS_PREFENCE_SELECTED,
properties: {
action: 'Metrics Option',
legacy_event: true,
is_metrics_enabled: true,
},
},
{
@ -88,10 +87,9 @@ export default function OnboardingMetametrics() {
trackEvent(
{
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.METRICS_OPT_OUT,
event: EVENT_NAMES.ONBOARDING_WALLET_METRICS_PREFENCE_SELECTED,
properties: {
action: 'Metrics Option',
legacy_event: true,
is_metrics_enabled: false,
},
},
{

21
ui/pages/onboarding-flow/onboarding-flow.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useContext } from 'react';
import { Switch, Route, useHistory, useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import Unlock from '../unlock-page';
@ -27,8 +27,10 @@ import {
verifySeedPhrase,
} from '../../store/actions';
import { getFirstTimeFlowTypeRoute } from '../../selectors';
import { MetaMetricsContext } from '../../contexts/metametrics';
import Button from '../../components/ui/button';
import { useI18nContext } from '../../hooks/useI18nContext';
import { EVENT_NAMES, EVENT } from '../../../shared/constants/metametrics';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import ExperimentalArea from '../../components/app/flask/experimental-area';
///: END:ONLY_INCLUDE_IN
@ -44,6 +46,8 @@ import ImportSRP from './import-srp/import-srp';
import OnboardingPinExtension from './pin-extension/pin-extension';
import MetaMetricsComponent from './metametrics/metametrics';
const TWITTER_URL = 'https://twitter.com/MetaMask';
export default function OnboardingFlow() {
const [secretRecoveryPhrase, setSecretRecoveryPhrase] = useState('');
const dispatch = useDispatch();
@ -53,6 +57,8 @@ export default function OnboardingFlow() {
const completedOnboarding = useSelector(getCompletedOnboarding);
const nextRoute = useSelector(getFirstTimeFlowTypeRoute);
const isFromReminder = new URLSearchParams(search).get('isFromReminder');
const trackEvent = useContext(MetaMetricsContext);
useEffect(() => {
if (completedOnboarding && !isFromReminder) {
history.push(DEFAULT_ROUTE);
@ -182,7 +188,18 @@ export default function OnboardingFlow() {
<Button
className="onboarding-flow__twitter-button"
type="link"
href="https://twitter.com/MetaMask"
href={TWITTER_URL}
onClick={() => {
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_TWITTER_CLICK,
properties: {
text: t('followUsOnTwitter'),
location: EVENT_NAMES.ONBOARDING_WALLET_CREATION_COMPLETE,
url: TWITTER_URL,
},
});
}}
target="_blank"
>
<span>{t('followUsOnTwitter')}</span>

21
ui/pages/onboarding-flow/pin-extension/pin-extension.js
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import React, { useState, useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { Carousel } from 'react-responsive-carousel';
import Typography from '../../../components/ui/typography/typography';
import { useI18nContext } from '../../../hooks/useI18nContext';
@ -12,6 +12,10 @@ import {
} from '../../../helpers/constants/design-system';
import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
import { setCompletedOnboarding } from '../../../store/actions';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
import { getFirstTimeFlowType } from '../../../selectors';
import OnboardingPinBillboard from './pin-billboard';
export default function OnboardingPinExtension() {
@ -19,12 +23,25 @@ export default function OnboardingPinExtension() {
const [selectedIndex, setSelectedIndex] = useState(0);
const history = useHistory();
const dispatch = useDispatch();
const trackEvent = useContext(MetaMetricsContext);
const firstTimeFlowType = useSelector(getFirstTimeFlowType);
const handleClick = async () => {
if (selectedIndex === 0) {
setSelectedIndex(1);
} else {
await dispatch(setCompletedOnboarding());
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_SETUP_COMPLETE,
properties: {
wallet_setup_type:
firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT
? 'import'
: 'new',
new_wallet: firstTimeFlowType === FIRST_TIME_FLOW_TYPES.CREATE,
},
});
history.push(DEFAULT_ROUTE);
}
};

15
ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
@ -27,6 +27,8 @@ import { ONBOARDING_PIN_EXTENSION_ROUTE } from '../../../helpers/constants/route
import { Icon, TextField } from '../../../components/component-library';
import NetworkDropdown from '../../../components/app/dropdowns/network-dropdown';
import NetworkDisplay from '../../../components/app/network-display/network-display';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
import { Setting } from './setting';
export default function PrivacySettings() {
@ -43,6 +45,7 @@ export default function PrivacySettings() {
] = useState(true);
const [ipfsURL, setIPFSURL] = useState('');
const [ipfsError, setIPFSError] = useState(null);
const trackEvent = useContext(MetaMetricsContext);
const networks = useSelector(
(state) => state.metamask.frequentRpcListDetail || [],
@ -64,6 +67,16 @@ export default function PrivacySettings() {
dispatch(setIpfsGateway(host));
}
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_ADVANCED_SETTINGS,
properties: {
show_incoming_tx: showIncomingTransactions,
use_phising_detection: usePhishingDetection,
turnon_token_detection: turnOnTokenDetection,
},
});
history.push(ONBOARDING_PIN_EXTENSION_ROUTE);
};

9
ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
View File

@ -1,4 +1,4 @@
import React, { useState, useMemo } from 'react';
import React, { useState, useMemo, useContext } from 'react';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { debounce } from 'lodash';
@ -19,6 +19,8 @@ import {
import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { setSeedPhraseBackedUp } from '../../../store/actions';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
import RecoveryPhraseChips from './recovery-phrase-chips';
export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
@ -28,6 +30,7 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
const splitSecretRecoveryPhrase = secretRecoveryPhrase.split(' ');
const indicesToCheck = [2, 3, 7];
const [matching, setMatching] = useState(false);
const trackEvent = useContext(MetaMetricsContext);
// Removes seed phrase words from chips corresponding to the
// indicesToCheck so that user has to complete the phrase and confirm
@ -98,6 +101,10 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
className="recovery-phrase__footer__confirm--button"
onClick={async () => {
await dispatch(setSeedPhraseBackedUp(true));
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_SECURITY_PHRASE_CONFIRMED,
});
history.push(ONBOARDING_COMPLETION_ROUTE);
}}
disabled={!matching}

14
ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useContext } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import PropTypes from 'prop-types';
import Box from '../../../components/ui/box';
@ -18,6 +18,8 @@ import {
ThreeStepProgressBar,
threeStepStages,
} from '../../../components/app/step-progress-bar';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import RecoveryPhraseChips from './recovery-phrase-chips';
export default function RecoveryPhrase({ secretRecoveryPhrase }) {
@ -31,6 +33,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
const isFromReminderParam = searchParams.get('isFromReminder')
? '/?isFromReminder=true'
: '';
const trackEvent = useContext(MetaMetricsContext);
return (
<div className="recovery-phrase" data-testid="recovery-phrase">
@ -127,6 +130,11 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
type="primary"
className="recovery-phrase__footer--button"
onClick={() => {
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event:
EVENT_NAMES.ONBOARDING_WALLET_SECURITY_PHRASE_WRITTEN_DOWN,
});
history.push(
`${ONBOARDING_CONFIRM_SRP_ROUTE}${isFromReminderParam}`,
);
@ -141,6 +149,10 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
type="primary"
className="recovery-phrase__footer--button"
onClick={() => {
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_SECURITY_PHRASE_REVEALED,
});
setPhraseRevealed(true);
}}
>

25
ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useContext } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Box from '../../../components/ui/box';
@ -16,8 +16,10 @@ import {
threeStepStages,
} from '../../../components/app/step-progress-bar';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { ONBOARDING_REVIEW_SRP_ROUTE } from '../../../helpers/constants/routes';
import { getCurrentLocale } from '../../../ducks/metamask/metamask';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
import SkipSRPBackup from './skip-srp-backup-popover';
export default function SecureYourWallet() {
@ -32,11 +34,21 @@ export default function SecureYourWallet() {
? '/?isFromReminder=true'
: '';
const trackEvent = useContext(MetaMetricsContext);
const handleClickRecommended = () => {
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_SECURITY_STARTED,
});
history.push(`${ONBOARDING_REVIEW_SRP_ROUTE}${isFromReminderParam}`);
};
const handleClickNotRecommended = () => {
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_SECURITY_SKIP_INITIATED,
});
setShowSkipSRPBackupPopover(true);
};
@ -86,7 +98,16 @@ export default function SecureYourWallet() {
</Typography>
</Box>
<Box>
<video className="secure-your-wallet__video" controls>
<video
className="secure-your-wallet__video"
onPlay={() => {
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_VIDEO_PLAY,
});
}}
controls
>
<source
type="video/webm"
src="./images/videos/recovery-onboarding/video.webm"

21
ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux';
@ -17,12 +17,15 @@ import {
import { setSeedPhraseBackedUp } from '../../../store/actions';
import Checkbox from '../../../components/ui/check-box';
import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes';
import { EVENT_NAMES, EVENT } from '../../../../shared/constants/metametrics';
import { MetaMetricsContext } from '../../../contexts/metametrics';
export default function SkipSRPBackup({ handleClose }) {
const [checked, setChecked] = useState(false);
const t = useI18nContext();
const history = useHistory();
const dispatch = useDispatch();
const trackEvent = useContext(MetaMetricsContext);
return (
<Popover
@ -33,7 +36,17 @@ export default function SkipSRPBackup({ handleClose }) {
justifyContent={JUSTIFY_CONTENT.CENTER}
alignItems={ALIGN_ITEMS.CENTER}
>
<Button onClick={handleClose} type="secondary" rounded>
<Button
onClick={() => {
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_SECURITY_SKIP_CANCELED,
});
handleClose();
}}
type="secondary"
rounded
>
{t('goBack')}
</Button>
<Button
@ -43,6 +56,10 @@ export default function SkipSRPBackup({ handleClose }) {
rounded
onClick={async () => {
await dispatch(setSeedPhraseBackedUp(false));
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_SECURITY_SKIP_CONFIRMED,
});
history.push(ONBOARDING_COMPLETION_ROUTE);
}}
>

28
ui/pages/onboarding-flow/welcome/welcome.js
View File

@ -1,5 +1,5 @@
import EventEmitter from 'events';
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useContext } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { Carousel } from 'react-responsive-carousel';
@ -12,6 +12,8 @@ import {
TEXT_ALIGN,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import { setFirstTimeFlowType } from '../../../store/actions';
import {
ONBOARDING_METAMETRICS,
@ -40,17 +42,41 @@ export default function OnboardingWelcome() {
}
}
}, [currentKeyring, history, firstTimeFlowType]);
const trackEvent = useContext(MetaMetricsContext);
const onCreateClick = () => {
dispatch(setFirstTimeFlowType('create'));
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_CREATION_STARTED,
properties: {
account_type: 'metamask',
},
});
history.push(ONBOARDING_METAMETRICS);
};
const onImportClick = () => {
dispatch(setFirstTimeFlowType('import'));
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WALLET_IMPORT_STARTED,
properties: {
account_type: 'imported',
},
});
history.push(ONBOARDING_METAMETRICS);
};
trackEvent({
category: EVENT.CATEGORIES.ONBOARDING,
event: EVENT_NAMES.ONBOARDING_WELCOME,
properties: {
message_title: t('welcomeToMetaMask'),
app_version: global?.platform?.getVersion(),
},
});
return (
<div className="onboarding-welcome" data-testid="onboarding-welcome">
<Carousel showThumbs={false} showStatus={false} showArrows>