feat(metametrics): add events during snap account transaction loading screen

Author: ccharly

shared/constants/metametrics.ts

@@ -682,6 +682,7 @@ export enum MetaMetricsEventName {
   AddSnapAccountCancelled = 'Add Snap Account Cancelled',
   AddSnapAccountSuccessViewed = 'Add Snap Account Success Viewed',
   AddSnapAccountSuccessClicked = 'Add Snap Account Success Clicked',
+  SnapAccountTransactionLoadingViewed = 'Snap Account Transaction Loading Viewed',
   SnapAccountTransactionFinalizeViewed = 'Snap Account Transaction Finalize Viewed',
   SnapAccountTransactionFinalizeRedirectGoToSiteClicked = 'Snap Account Transaction Finalize Redirect "Go To Site" Clicked',
   SnapAccountTransactionFinalizeRedirectSnapUrlClicked = 'Snap Account Transaction Finalize Redirect "Snap URL" Clicked',

ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js

@@ -58,6 +58,7 @@ import { ConfirmGasDisplay } from '../components/confirm-gas-display';
 import updateTxData from '../../../../shared/modules/updateTxData';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { KeyringType } from '../../../../shared/constants/keyring';
+import SnapAccountTransactionLoadingScreen from '../../snap-account-transaction-loading-screen/snap-account-transaction-loading-screen';
 ///: END:ONLY_INCLUDE_IF
 import { isHardwareKeyring } from '../../../helpers/utils/hardware';
 import FeeDetailsComponent from '../components/fee-details-component/fee-details-component';
@@ -102,6 +103,9 @@ export default class ConfirmTransactionBase extends Component {
     unapprovedTxCount: PropTypes.number,
     customGas: PropTypes.object,
     addToAddressBookIfNew: PropTypes.func,
+    ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+    fromInternalAccount: PropTypes.object,
+    ///: END:ONLY_INCLUDE_IF
     keyringForAccount: PropTypes.object,
     // Component props
     actionKey: PropTypes.string,
@@ -671,14 +675,21 @@ export default class ConfirmTransactionBase extends Component {
       toAccounts,
       toAddress,
       keyringForAccount,
+      ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+      fromInternalAccount,
+      ///: END:ONLY_INCLUDE_IF
     } = this.props;
 
     let loadingIndicatorMessage;
 
     switch (keyringForAccount?.type) {
       ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
       case KeyringType.snap:
-        loadingIndicatorMessage = this.context.t('loadingScreenSnapMessage');
+        loadingIndicatorMessage = (
+          <SnapAccountTransactionLoadingScreen
+            internalAccount={fromInternalAccount}
+          ></SnapAccountTransactionLoadingScreen>
+        );
         break;
       ///: END:ONLY_INCLUDE_IF
       default:

ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js

@@ -159,8 +159,8 @@ const mapStateToProps = (state, ownProps) => {
   const tokenToAddress = getTokenAddressParam(transactionData);
 
   const { balance } = accounts[fromAddress];
-  const fromName = getInternalAccountByAddress(state, fromAddress)?.metadata
-    .name;
+  const fromInternalAccount = getInternalAccountByAddress(state, fromAddress);
+  const fromName = fromInternalAccount?.metadata.name;
   const keyring = findKeyringForAddress(state, fromAddress);
 
   const isSendingAmount =
@@ -315,6 +315,9 @@ const mapStateToProps = (state, ownProps) => {
     isBuyableChain,
     useCurrencyRateCheck: getUseCurrencyRateCheck(state),
     keyringForAccount: keyring,
+    ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+    fromInternalAccount,
+    ///: END:ONLY_INCLUDE_IF
     isUsingPaymaster,
     isSigningOrSubmitting,
     isUserOpContractDeployError,

ui/pages/snap-account-transaction-loading-screen/index.ts

@@ -0,0 +1 @@
+export { default as SnapAccountTransactionLoadingScreen } from './snap-account-transaction-loading-screen';

ui/pages/snap-account-transaction-loading-screen/snap-account-transaction-loading-screen.tsx

@@ -0,0 +1,34 @@
+import React, { useContext, useEffect } from 'react';
+import { InternalAccount } from '@metamask/keyring-api';
+import { useI18nContext } from '../../hooks/useI18nContext';
+import { MetaMetricsContext } from '../../contexts/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+  MetaMetricsEventAccountType,
+} from '../../../shared/constants/metametrics';
+
+const SnapAccountTransactionLoadingScreen = ({
+  internalAccount,
+}: {
+  internalAccount: InternalAccount;
+}) => {
+  const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
+
+  useEffect(() => {
+    trackEvent({
+      event: MetaMetricsEventName.SnapAccountTransactionLoadingViewed,
+      category: MetaMetricsEventCategory.Transactions,
+      properties: {
+        snap_id: internalAccount?.metadata.snap?.id,
+        snap_name: internalAccount?.metadata.snap?.name,
+        account_type: MetaMetricsEventAccountType.Snap,
+      },
+    });
+  }, []);
+
+  return <span>{t('loadingScreenSnapMessage')}</span>;
+};
+
+export default SnapAccountTransactionLoadingScreen;