Feat/srp metrics (#18015)

* add srp metrics

* add event names

* fix text

* add test

* add event test to hold to reveal modal

* fix lint

* add event test to reveal seed

* update coverage target

* revert willHide

* add more tests

* fix lint

* update coverage

* git commit -m "fix comments"

* fix merge conflict

* fixed the merge conflicts with #18353

* fix text

* update deprecated import

* alphabetize metametrics enums

* update coverage

* update coverage

---------

Co-authored-by: Brad Decker <bhdecker84@gmail.com>
Co-authored-by: Howard Braham <howrad@gmail.com>

coverage-targets.js

@@ -6,10 +6,10 @@
 // subset of files to check against these targets.
 module.exports = {
   global: {
-    lines: 69.92,
+    lines: 70.26,
-    branches: 57.63,
+    branches: 57.91,
-    statements: 69.24,
+    statements: 69.59,
-    functions: 62.51,
+    functions: 62.97,
   },
   transforms: {
     branches: 100,

shared/constants/metametrics.ts

@@ -521,34 +521,7 @@ export enum MetaMetricsEventName {
   NavBuyButtonClicked = 'Buy Button Clicked',
   NavSendButtonClicked = 'Send Button Clicked',
   NavSwapButtonClicked = 'Swap Button Clicked',
-  SrpToConfirmBackup = 'SRP Backup Confirm Displayed',
-  WalletSetupStarted = 'Wallet Setup Selected',
-  WalletSetupCanceled = 'Wallet Setup Canceled',
-  WalletSetupFailed = 'Wallet Setup Failed',
-  WalletCreated = 'Wallet Created',
   NftAdded = 'NFT Added',
-  OnrampProviderSelected = 'On-ramp Provider Selected',
-  PermissionsApproved = 'Permissions Approved',
-  PermissionsRejected = 'Permissions Rejected',
-  PermissionsRequested = 'Permissions Requested',
-  PhishingPageDisplayed = 'Phishing Page Displayed',
-  PortfolioLinkClicked = 'Portfolio Link Clicked',
-  PublicAddressCopied = 'Public Address Copied',
-  ProviderMethodCalled = 'Provider Method Called',
-  SignatureApproved = 'Signature Approved',
-  SignatureFailed = 'Signature Failed',
-  SignatureRejected = 'Signature Rejected',
-  SignatureRequested = 'Signature Requested',
-  TermsOfUseShown = 'Terms of Use Shown',
-  TermsOfUseAccepted = 'Terms of Use Accepted',
-  TokenImportButtonClicked = 'Import Token Button Clicked',
-  TokenScreenOpened = 'Token Screen Opened',
-  SupportLinkClicked = 'Support Link Clicked',
-  TokenAdded = 'Token Added',
-  TokenDetected = 'Token Detected',
-  TokenHidden = 'Token Hidden',
-  TokenImportCanceled = 'Token Import Canceled',
-  TokenImportClicked = 'Token Import Clicked',
   OnboardingWelcome = 'App Installed',
   OnboardingWalletCreationStarted = 'Wallet Setup Selected',
   OnboardingWalletImportStarted = 'Wallet Import Started',
@@ -566,7 +539,48 @@ export enum MetaMetricsEventName {
   OnboardingWalletImportAttempted = 'Wallet Import Attempted',
   OnboardingWalletVideoPlay = 'SRP Intro Video Played',
   OnboardingTwitterClick = 'External Link Clicked',
+  OnrampProviderSelected = 'On-ramp Provider Selected',
+  PermissionsApproved = 'Permissions Approved',
+  PermissionsRejected = 'Permissions Rejected',
+  PermissionsRequested = 'Permissions Requested',
+  PhishingPageDisplayed = 'Phishing Page Displayed',
+  PortfolioLinkClicked = 'Portfolio Link Clicked',
+  ProviderMethodCalled = 'Provider Method Called',
+  PublicAddressCopied = 'Public Address Copied',
   ServiceWorkerRestarted = 'Service Worker Restarted',
+  SignatureApproved = 'Signature Approved',
+  SignatureFailed = 'Signature Failed',
+  SignatureRejected = 'Signature Rejected',
+  SignatureRequested = 'Signature Requested',
+  SrpRevealStarted = 'Reveal SRP Initiated',
+  SrpRevealClicked = 'Clicked Reveal Secret Recovery',
+  SrpRevealViewed = 'Views Reveal Secret Recovery',
+  SrpRevealBackButtonClicked = 'Clicked Back on Reveal SRP Password Page',
+  SrpRevealCancelled = 'Reveal SRP Cancelled',
+  SrpRevealCancelButtonClicked = 'Clicks Cancel on Reveal Secret Recovery Phrase Page',
+  SrpRevealCloseClicked = 'Clicks CLOSE with SRP',
+  SrpRevealNextClicked = 'Clicks Next on Reveal Secret Recovery Phrase',
+  SrpHoldToRevealClickStarted = 'Reveal SRP Click Started',
+  SrpHoldToRevealCloseClicked = 'Closes Hold To Reveal SRP',
+  SrpHoldToRevealCompleted = 'Reveal SRP Completed',
+  SrpViewsSrpQR = 'Views SRP QR Code',
+  SrpViewSrpText = 'Views SRP',
+  SrpCopiedToClipboard = 'Copies SRP to clipboard',
+  SrpToConfirmBackup = 'SRP Backup Confirm Displayed',
+  SupportLinkClicked = 'Support Link Clicked',
+  TermsOfUseShown = 'Terms of Use Shown',
+  TermsOfUseAccepted = 'Terms of Use Accepted',
+  TokenImportButtonClicked = 'Import Token Button Clicked',
+  TokenScreenOpened = 'Token Screen Opened',
+  TokenAdded = 'Token Added',
+  TokenDetected = 'Token Detected',
+  TokenHidden = 'Token Hidden',
+  TokenImportCanceled = 'Token Import Canceled',
+  TokenImportClicked = 'Token Import Clicked',
+  WalletSetupStarted = 'Wallet Setup Selected',
+  WalletSetupCanceled = 'Wallet Setup Canceled',
+  WalletSetupFailed = 'Wallet Setup Failed',
+  WalletCreated = 'Wallet Created',
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   UserClickedDeepLink = 'User clicked deeplink',
   ///: END:ONLY_INCLUDE_IN
@@ -585,8 +599,8 @@ export enum MetaMetricsEventName {
 
 export enum MetaMetricsEventAccountType {
   Default = 'metamask',
-  Imported = 'imported',
   Hardware = 'hardware',
+  Imported = 'imported',
 }
 
 export enum MetaMetricsEventAccountImportType {
@@ -600,6 +614,7 @@ export enum MetaMetricsEventCategory {
   App = 'App',
   Auth = 'Auth',
   Background = 'Background',
+  Desktop = 'Desktop',
   // The TypeScript ESLint rule is incorrectly marking this line.
   /* eslint-disable-next-line @typescript-eslint/no-shadow */
   Error = 'Error',
@@ -613,13 +628,12 @@ export enum MetaMetricsEventCategory {
   Onboarding = 'Onboarding',
   Phishing = 'Phishing',
   Retention = 'Retention',
+  ServiceWorkers = 'service_workers',
   Settings = 'Settings',
   Snaps = 'Snaps',
   Swaps = 'Swaps',
   Transactions = 'Transactions',
   Wallet = 'Wallet',
-  Desktop = 'Desktop',
-  ServiceWorkers = 'service_workers',
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   MMI = 'Institutional',
   ///: END:ONLY_INCLUDE_IN
@@ -627,10 +641,10 @@ export enum MetaMetricsEventCategory {
 }
 
 export enum MetaMetricsEventLinkType {
-  TransactionBlockExplorer = 'Transaction Block Explorer',
-  BlockExplorer = 'Block Explorer',
   AccountTracker = 'Account Tracker',
+  BlockExplorer = 'Block Explorer',
   TokenTracker = 'Token Tracker',
+  TransactionBlockExplorer = 'Transaction Block Explorer',
 }
 
 export enum MetaMetricsEventKeyType {
@@ -642,9 +656,9 @@ export enum MetaMetricsEventKeyType {
 export enum MetaMetricsEventOnrampProviderType {
   Coinbase = 'coinbase',
   Moonpay = 'moonpay',
-  Wyre = 'wyre',
-  Transak = 'transak',
   SelfDeposit = 'direct_deposit',
+  Transak = 'transak',
+  Wyre = 'wyre',
 }
 
 export enum MetaMetricsNetworkEventSource {

ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js

@@ -9,6 +9,12 @@ import {
   DISPLAY,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventKeyType,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
 
 const radius = 14;
 const strokeWidth = 2;
@@ -19,6 +25,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
   const isLongPressing = useRef(false);
   const [isUnlocking, setIsUnlocking] = useState(false);
   const [hasTriggeredUnlock, setHasTriggeredUnlock] = useState(false);
+  const trackEvent = useContext(MetaMetricsContext);
 
   /**
    * Prevent animation events from propogating up
@@ -34,6 +41,13 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
    */
   const onMouseDown = () => {
     isLongPressing.current = true;
+    trackEvent({
+      category: MetaMetricsEventCategory.Keys,
+      event: MetaMetricsEventName.SrpHoldToRevealClickStarted,
+      properties: {
+        key_type: MetaMetricsEventKeyType.Srp,
+      },
+    });
   };
 
   /**
@@ -57,6 +71,20 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
    */
   const triggerOnLongPressed = useCallback(
     (e) => {
+      trackEvent({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpHoldToRevealCompleted,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      trackEvent({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpRevealViewed,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
       onLongPressed();
       setHasTriggeredUnlock(true);
       preventPropogation(e);
@@ -93,6 +121,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
         <Box className="hold-to-reveal-button__absolute-fill">
           <svg className="hold-to-reveal-button__circle-svg">
             <circle
+              aria-label="circle-locked"
               onTransitionEnd={onProgressComplete}
               className="hold-to-reveal-button__circle-foreground"
               cx={radius}
@@ -152,6 +181,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
           </svg>
         </div>
         <div
+          aria-label="circle-unlocked"
           className="hold-to-reveal-button__unlock-icon-container"
           onAnimationEnd={triggerOnLongPressed}
         >

ui/components/app/hold-to-reveal-button/hold-to-reveal-button.test.js

@@ -1,7 +1,19 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventKeyType,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
 import HoldToRevealButton from './hold-to-reveal-button';
 
+const mockTrackEvent = jest.fn();
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: () => mockTrackEvent,
+}));
+
 describe('HoldToRevealButton', () => {
   let props = {};
 
@@ -14,6 +26,10 @@ describe('HoldToRevealButton', () => {
     };
   });
 
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('should render a button with label', () => {
     const { getByText } = render(<HoldToRevealButton {...props} />);
 
@@ -34,39 +50,66 @@ describe('HoldToRevealButton', () => {
     expect(button).toBeDefined();
   });
 
-  it('should not show the locked padlock when a button is long pressed and then should show it after it was lifted off before the animation concludes', () => {
+  it('should show the locked padlock when a button is long pressed and then should show it after it was lifted off before the animation concludes', async () => {
-    const { getByText } = render(<HoldToRevealButton {...props} />);
+    const { getByText, queryByLabelText } = render(
+      <HoldToRevealButton {...props} />,
+    );
 
     const button = getByText('Hold to reveal SRP');
 
     fireEvent.mouseDown(button);
+    const circleLocked = queryByLabelText('circle-locked');
 
-    waitFor(() => {
+    await waitFor(() => {
-      expect(button.firstChild).toHaveClass(
+      expect(circleLocked).toBeInTheDocument();
-        'hold-to-reveal-button__lock-icon-container',
-      );
     });
 
     fireEvent.mouseUp(button);
+    const circleUnlocked = queryByLabelText('circle-unlocked');
 
-    waitFor(() => {
+    await waitFor(() => {
-      expect(button.firstChild).not.toHaveClass(
+      expect(circleUnlocked).not.toBeInTheDocument();
-        'hold-to-reveal-button__lock-icon-container',
-      );
     });
   });
 
-  it('should show the unlocked padlock when a button is long pressed for the duration of the animation', () => {
+  it('should show the unlocked padlock when a button is long pressed for the duration of the animation', async () => {
-    const { getByText } = render(<HoldToRevealButton {...props} />);
+    const { getByText, queryByLabelText } = render(
+      <HoldToRevealButton {...props} />,
+    );
 
     const button = getByText('Hold to reveal SRP');
 
     fireEvent.mouseDown(button);
 
-    waitFor(() => {
+    const circleLocked = queryByLabelText('circle-locked');
-      expect(button.firstChild).toHaveClass(
+    fireEvent.transitionEnd(circleLocked);
-        'hold-to-reveal-button__unlock-icon-container',
+
-      );
+    const circleUnlocked = queryByLabelText('circle-unlocked');
+    fireEvent.animationEnd(circleUnlocked);
+
+    await waitFor(() => {
+      expect(circleUnlocked).toBeInTheDocument();
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpHoldToRevealClickStarted,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(5, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpHoldToRevealCompleted,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(6, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpRevealViewed,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
     });
   });
 });

ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useContext } from 'react';
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
 import Box from '../../../ui/box';
 import {
@@ -20,9 +20,16 @@ import {
 import HoldToRevealButton from '../../hold-to-reveal-button';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
+import { MetaMetricsContext } from '../../../../contexts/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventKeyType,
+  MetaMetricsEventName,
+} from '../../../../../shared/constants/metametrics';
 
 const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
   const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
 
   const unlock = () => {
     onLongPressed();
@@ -53,7 +60,16 @@ const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
           className="hold-to-reveal-modal__close"
           iconName={IconName.Close}
           size={Size.SM}
-          onClick={handleCancel}
+          onClick={() => {
+            trackEvent({
+              category: MetaMetricsEventCategory.Keys,
+              event: MetaMetricsEventName.SrpHoldToRevealCloseClicked,
+              properties: {
+                key_type: MetaMetricsEventKeyType.Srp,
+              },
+            });
+            handleCancel();
+          }}
           ariaLabel={t('close')}
         />
       </Box>

ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.test.js

@@ -12,23 +12,25 @@ import {
   holdToRevealContent5,
   holdToRevealTitle,
 } from '../../../../../app/_locales/en/messages.json';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventKeyType,
+  MetaMetricsEventName,
+} from '../../../../../shared/constants/metametrics';
+import { MetaMetricsContext } from '../../../../contexts/metametrics';
 import HoldToRevealModal from '.';
 
-const mockShowModal = jest.fn();
-
-jest.mock('../../../../store/actions.ts', () => {
-  return {
-    showModal: () => mockShowModal,
-  };
-});
-
 describe('Hold to Reveal Modal', () => {
   const mockStore = configureMockState([thunk])(mockState);
-  const onLongPressStub = jest.fn().mockResolvedValue();
+  const onLongPressStub = jest.fn();
-  const hideModalStub = jest.fn().mockResolvedValue();
+  const hideModalStub = jest.fn();
 
   global.platform = { openTab: jest.fn() };
 
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('should render the srp warning text and button', () => {
     const { getByText } = renderWithProvider(
       <HoldToRevealModal
@@ -72,7 +74,7 @@ describe('Hold to Reveal Modal', () => {
   });
 
   it('should should execute onLongPressed after long press', async () => {
-    const { getByText } = renderWithProvider(
+    const { getByText, queryByLabelText } = renderWithProvider(
       <HoldToRevealModal
         onLongPressed={onLongPressStub}
         hideModal={hideModalStub}
@@ -81,17 +83,24 @@ describe('Hold to Reveal Modal', () => {
     );
 
     const holdButton = getByText('Hold to reveal SRP');
-    waitFor(() => {
+    const circleLocked = queryByLabelText('circle-locked');
+
+    fireEvent.mouseDown(holdButton);
+    fireEvent.transitionEnd(circleLocked);
+
+    const circleUnlocked = queryByLabelText('circle-unlocked');
+    fireEvent.animationEnd(circleUnlocked);
+
+    await waitFor(() => {
       expect(holdButton.firstChild).toHaveClass(
-        'hold-to-reveal-button__unlock-icon-container',
+        'box hold-to-reveal-button__icon-container box--flex-direction-row',
       );
-      expect(onLongPressStub.callCount).toBe(1);
+      expect(onLongPressStub).toHaveBeenCalled();
-      expect(hideModalStub.callCount).toBe(1);
     });
   });
 
   it('should remain open if long pressed was not complete', async () => {
-    const { getByText } = renderWithProvider(
+    const { getByText, queryByLabelText } = renderWithProvider(
       <HoldToRevealModal
         onLongPressed={onLongPressStub}
         hideModal={hideModalStub}
@@ -100,15 +109,74 @@ describe('Hold to Reveal Modal', () => {
     );
 
     const holdButton = getByText('Hold to reveal SRP');
-    waitFor(
+
-      () => {
+    fireEvent.click(holdButton);
-        expect(holdButton.firstChild).toHaveClass(
+
-          'hold-to-reveal-button__unlock-icon-container',
+    const circleLocked = queryByLabelText('circle-locked');
-        );
+    const circleUnlocked = queryByLabelText('circle-unlocked');
-        expect(onLongPressStub.callCount).toBe(0);
+
-        expect(hideModalStub.callCount).toBe(0);
+    await waitFor(() => {
-      },
+      expect(circleLocked).toBeInTheDocument();
-      { interval: 100 },
+      expect(circleUnlocked).not.toBeInTheDocument();
+      expect(onLongPressStub).not.toHaveBeenCalled();
+      expect(hideModalStub).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should fire event when closing', async () => {
+    const mockTrackEvent = jest.fn();
+
+    const { queryByLabelText } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <HoldToRevealModal
+          onLongPressed={onLongPressStub}
+          hideModal={hideModalStub}
+        />
+        ,
+      </MetaMetricsContext.Provider>,
+      mockStore,
     );
+
+    const closeButton = queryByLabelText('Close');
+
+    fireEvent.click(closeButton);
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenCalledWith({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpHoldToRevealCloseClicked,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+    });
+  });
+
+  it('should not hide modal after completing long press if set to false', async () => {
+    const { getByText, queryByLabelText } = renderWithProvider(
+      <HoldToRevealModal
+        onLongPressed={onLongPressStub}
+        hideModal={hideModalStub}
+        willHide={false}
+      />,
+      mockStore,
+    );
+
+    const holdButton = getByText('Hold to reveal SRP');
+    const circleLocked = queryByLabelText('circle-locked');
+
+    fireEvent.mouseDown(holdButton);
+    fireEvent.transitionEnd(circleLocked);
+
+    const circleUnlocked = queryByLabelText('circle-unlocked');
+    fireEvent.animationEnd(circleUnlocked);
+
+    await waitFor(() => {
+      expect(holdButton.firstChild).toHaveClass(
+        'box hold-to-reveal-button__icon-container box--flex-direction-row',
+      );
+      expect(onLongPressStub).toHaveBeenCalled();
+      expect(hideModalStub).not.toHaveBeenCalled();
+    });
   });
 });

ui/pages/keychains/reveal-seed.js

@@ -148,9 +148,39 @@ const RevealSeedPage = () => {
   };
 
   const renderRevealSeedContent = () => {
+    // default for SRP_VIEW_SRP_TEXT event because this is the first thing shown after rendering
+    trackEvent({
+      category: MetaMetricsEventCategory.Keys,
+      event: MetaMetricsEventName.SrpViewSrpText,
+      properties: {
+        key_type: MetaMetricsEventKeyType.Srp,
+      },
+    });
+
     return (
       <div>
-        <Tabs defaultActiveTabName={t('revealSeedWordsText')}>
+        <Tabs
+          defaultActiveTabName={t('revealSeedWordsText')}
+          onTabClick={(tabName) => {
+            if (tabName === 'text-seed') {
+              trackEvent({
+                category: MetaMetricsEventCategory.Keys,
+                event: MetaMetricsEventName.SrpViewSrpText,
+                properties: {
+                  key_type: MetaMetricsEventKeyType.Srp,
+                },
+              });
+            } else if (tabName === 'qr-seed') {
+              trackEvent({
+                category: MetaMetricsEventCategory.Keys,
+                event: MetaMetricsEventName.SrpViewsSrpQR,
+                properties: {
+                  key_type: MetaMetricsEventKeyType.Srp,
+                },
+              });
+            }
+          }}
+        >
           <Tab
             name={t('revealSeedWordsText')}
             className="reveal-seed__tab"
@@ -169,6 +199,14 @@ const RevealSeedPage = () => {
                     copy_method: 'clipboard',
                   },
                 });
+                trackEvent({
+                  category: MetaMetricsEventCategory.Keys,
+                  event: MetaMetricsEventName.SrpCopiedToClipboard,
+                  properties: {
+                    key_type: MetaMetricsEventKeyType.Srp,
+                    copy_method: 'clipboard',
+                  },
+                });
               }}
             />
           </Tab>
@@ -211,6 +249,13 @@ const RevealSeedPage = () => {
                 key_type: MetaMetricsEventKeyType.Srp,
               },
             });
+            trackEvent({
+              category: MetaMetricsEventCategory.Keys,
+              event: MetaMetricsEventName.SrpRevealCancelled,
+              properties: {
+                key_type: MetaMetricsEventKeyType.Srp,
+              },
+            });
             history.push(mostRecentOverviewPage);
           }}
         >
@@ -227,6 +272,13 @@ const RevealSeedPage = () => {
                 key_type: MetaMetricsEventKeyType.Srp,
               },
             });
+            trackEvent({
+              category: MetaMetricsEventCategory.Keys,
+              event: MetaMetricsEventName.SrpRevealNextClicked,
+              properties: {
+                key_type: MetaMetricsEventKeyType.Srp,
+              },
+            });
             handleSubmit(event);
           }}
           disabled={password === ''}
@@ -244,7 +296,16 @@ const RevealSeedPage = () => {
           variant={BUTTON_VARIANT.SECONDARY}
           width={BLOCK_SIZES.FULL}
           size={Size.LG}
-          onClick={() => history.push(mostRecentOverviewPage)}
+          onClick={() => {
+            trackEvent({
+              category: MetaMetricsEventCategory.Keys,
+              event: MetaMetricsEventName.SrpRevealCloseClicked,
+              properties: {
+                key_type: MetaMetricsEventKeyType.Srp,
+              },
+            });
+            history.push(mostRecentOverviewPage);
+          }}
         >
           {t('close')}
         </Button>

ui/pages/keychains/reveal-seed.test.js

@@ -3,30 +3,46 @@ import configureMockStore from 'redux-mock-store';
 import { fireEvent, waitFor } from '@testing-library/react';
 import thunk from 'redux-thunk';
 import { renderWithProvider } from '../../../test/lib/render-helpers';
-import { MODAL_OPEN } from '../../store/actionConstants';
 import mockState from '../../../test/data/mock-state.json';
+import { MetaMetricsContext } from '../../contexts/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventKeyType,
+  MetaMetricsEventName,
+} from '../../../shared/constants/metametrics';
+import { Modal } from '../../components/app/modals';
+import configureStore from '../../store/store';
 import RevealSeedPage from './reveal-seed';
 
-const mockRequestRevealSeedWords = jest
+const mockRequestRevealSeedWords = jest.fn();
-  .fn()
+const mockShowModal = jest.fn();
-  .mockResolvedValue('test seed words');
-
-const mockShowModal = jest.fn().mockResolvedValue({
-  type: MODAL_OPEN,
-  payload: { name: 'HOLD_TO_REVEAL_SRP' },
-});
 
 jest.mock('../../store/actions.ts', () => ({
+  ...jest.requireActual('../../store/actions.ts'),
   requestRevealSeedWords: () => mockRequestRevealSeedWords,
-  showModal: () => mockShowModal,
 }));
 
+const mockStateWithModal = {
+  ...mockState,
+  appState: {
+    ...mockState.appState,
+    modal: {
+      open: true,
+      modalState: {
+        name: 'HOLD_TO_REVEAL_SRP',
+        props: {
+          onLongPressed: jest.fn(),
+        },
+      },
+    },
+  },
+};
+
 describe('Reveal Seed Page', () => {
-  const mockStore = configureMockStore([thunk])(mockState);
+  const mockStore = configureMockStore([thunk])(mockStateWithModal);
 
   afterEach(() => {
-    mockRequestRevealSeedWords.mockClear();
+    jest.clearAllMocks();
-    mockShowModal.mockClear();
   });
 
   it('should match snapshot', () => {
@@ -36,6 +52,7 @@ describe('Reveal Seed Page', () => {
   });
 
   it('form submit', async () => {
+    mockRequestRevealSeedWords.mockResolvedValueOnce('test srp');
     const { queryByTestId, queryByText } = renderWithProvider(
       <RevealSeedPage />,
       mockStore,
@@ -53,6 +70,7 @@ describe('Reveal Seed Page', () => {
   });
 
   it('shows hold to reveal', async () => {
+    mockRequestRevealSeedWords.mockResolvedValueOnce('test srp');
     const { queryByTestId, queryByText } = renderWithProvider(
       <RevealSeedPage />,
       mockStore,
@@ -66,16 +84,12 @@ describe('Reveal Seed Page', () => {
 
     await waitFor(() => {
       expect(mockRequestRevealSeedWords).toHaveBeenCalled();
-      expect(mockShowModal).toHaveBeenCalled();
     });
   });
 
   it('does not show modal on bad password', async () => {
-    const mockRequestPasswordFail = jest.fn().mockRejectedValue();
+    mockRequestRevealSeedWords.mockRejectedValueOnce('incorrect password');
-    jest.mock('../../store/actions.ts', () => ({
+
-      requestRevealSeedWords: () => mockRequestPasswordFail,
-      showModal: () => mockShowModal,
-    }));
     const { queryByTestId, queryByText } = renderWithProvider(
       <RevealSeedPage />,
       mockStore,
@@ -91,4 +105,237 @@ describe('Reveal Seed Page', () => {
       expect(mockShowModal).not.toHaveBeenCalled();
     });
   });
+
+  it('should show srp after hold to reveal', async () => {
+    // need to use actual store because redux-mock-store does not execute actions
+    const store = configureStore(mockState);
+    mockRequestRevealSeedWords.mockResolvedValueOnce('test srp');
+    const { queryByTestId, queryByText } = renderWithProvider(
+      <div>
+        <Modal />
+        <RevealSeedPage />
+      </div>,
+      store,
+    );
+
+    const nextButton = queryByText('Next');
+
+    fireEvent.change(queryByTestId('input-password'), {
+      target: { value: 'password' },
+    });
+
+    fireEvent.click(nextButton);
+
+    await waitFor(() => {
+      expect(mockRequestRevealSeedWords).toHaveBeenCalled();
+      expect(queryByText('Keep your SRP safe')).toBeInTheDocument();
+    });
+  });
+
+  it('emits events when correct password is entered', async () => {
+    const store = configureStore(mockState);
+    mockRequestRevealSeedWords
+      .mockRejectedValueOnce('incorrect password')
+      .mockResolvedValueOnce('test srp');
+
+    const mockTrackEvent = jest.fn();
+    const { queryByTestId, queryByText, getByText, queryByLabelText } =
+      renderWithProvider(
+        <MetaMetricsContext.Provider value={mockTrackEvent}>
+          <Modal />
+          <RevealSeedPage />
+        </MetaMetricsContext.Provider>,
+        store,
+      );
+
+    fireEvent.change(queryByTestId('input-password'), {
+      target: { value: 'bad-password' },
+    });
+
+    fireEvent.click(queryByText('Next'));
+
+    await waitFor(() => {
+      expect(mockRequestRevealSeedWords).toHaveBeenCalled();
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(1, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.KeyExportRequested,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpRevealNextClicked,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      expect(mockTrackEvent).toHaveBeenLastCalledWith({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.KeyExportFailed,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+          reason: undefined,
+        },
+      });
+    });
+
+    mockTrackEvent.mockClear();
+
+    fireEvent.change(queryByTestId('input-password'), {
+      target: { value: 'password' },
+    });
+
+    fireEvent.click(queryByText('Next'));
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(1, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.KeyExportRequested,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpRevealNextClicked,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      expect(mockTrackEvent).toHaveBeenLastCalledWith({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.KeyExportRevealed,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      expect(queryByText('Keep your SRP safe')).toBeInTheDocument();
+    });
+
+    const holdButton = getByText('Hold to reveal SRP');
+    const circleLocked = queryByLabelText('circle-locked');
+
+    fireEvent.mouseDown(holdButton);
+    fireEvent.transitionEnd(circleLocked);
+
+    const circleUnlocked = queryByLabelText('circle-unlocked');
+    fireEvent.animationEnd(circleUnlocked);
+
+    await waitFor(() => {
+      expect(holdButton.firstChild).toHaveClass(
+        'box hold-to-reveal-button__icon-container box--flex-direction-row',
+      );
+      // tests that the mock srp is now shown.
+      expect(getByText('test srp')).toBeInTheDocument();
+      expect(mockTrackEvent).toHaveBeenLastCalledWith({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpViewSrpText,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+    });
+
+    mockTrackEvent.mockClear();
+
+    // completed hold click
+    const qrTab = getByText('QR');
+    const textTab = getByText('Text');
+
+    fireEvent.click(qrTab);
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenLastCalledWith({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpViewsSrpQR,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+    });
+
+    fireEvent.click(textTab);
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenLastCalledWith({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpViewSrpText,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+    });
+
+    mockTrackEvent.mockClear();
+
+    const copyButton = getByText('Copy to clipboard');
+
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(1, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.KeyExportCopied,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+          copy_method: 'clipboard',
+        },
+      });
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpCopiedToClipboard,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+          copy_method: 'clipboard',
+        },
+      });
+    });
+
+    const doneButton = getByText('Close');
+    fireEvent.click(doneButton);
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenLastCalledWith({
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpRevealCloseClicked,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+    });
+  });
+
+  it('should emit event when cancel is clicked', async () => {
+    mockRequestRevealSeedWords
+      .mockRejectedValueOnce('incorrect password')
+      .mockResolvedValueOnce('test srp');
+    const mockTrackEvent = jest.fn();
+    const { queryByText } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <RevealSeedPage />
+      </MetaMetricsContext.Provider>,
+      mockStore,
+    );
+
+    const cancelButton = queryByText('Cancel');
+    fireEvent.click(cancelButton);
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(1, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.KeyExportCanceled,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+      expect(mockTrackEvent).toHaveBeenNthCalledWith(2, {
+        category: MetaMetricsEventCategory.Keys,
+        event: MetaMetricsEventName.SrpRevealCancelled,
+        properties: {
+          key_type: MetaMetricsEventKeyType.Srp,
+        },
+      });
+    });
+  });
 });

ui/pages/settings/security-tab/security-tab.component.js

@@ -121,6 +121,14 @@ export default class SecurityTab extends PureComponent {
                     location: 'Settings',
                   },
                 });
+                this.context.trackEvent({
+                  category: MetaMetricsEventCategory.Settings,
+                  event: MetaMetricsEventName.SrpRevealClicked,
+                  properties: {
+                    key_type: MetaMetricsEventKeyType.Srp,
+                    location: 'Settings',
+                  },
+                });
                 history.push(REVEAL_SEED_ROUTE);
               }}
             >