feat: AccountApproval, ACcountRightButton, AddCustomCollectible, AddC…

…ustomToken, AddressCopy, BackupAlert useGoToBridge events migration (#8657) AccountApproval, ACcountRightButton, AddCustomCollectible, AddCustomToken, AddressCopy, BackupAlert useGoToBridge components under UI folder, with new Segment metrics.
MetaMask · Feb 23, 2024 · 61c7553 · 61c7553
1 parent b1d2b64
commit 61c7553
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 277 deletions.
diff --git a/app/components/UI/AccountApproval/index.js b/app/components/UI/AccountApproval/index.js
@@ -15,7 +15,6 @@ import Text from '../../../component-library/components/Texts/Text';
 import NotificationManager from '../../../core/NotificationManager';
 
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import AnalyticsV2 from '../../../util/analyticsV2';
 
 import URL from 'url-parse';
 import { getAddressAccountType } from '../../../util/address';
@@ -40,6 +39,7 @@ import ShowWarningBanner from './showWarningBanner';
 import { ConnectAccountModalSelectorsIDs } from '../../../../e2e/selectors/Modals/ConnectAccountModal.selectors';
 import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
 import { getDecimalChainId } from '../../../util/networks';
+import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 
 /**
  * Account access approval component
@@ -87,6 +87,10 @@ class AccountApproval extends PureComponent {
      * A string representing the network chainId
      */
     chainId: PropTypes.string,
+    /**
+     * Metrics injected by withMetricsAwareness HOC
+     */
+    metrics: PropTypes.object,
   };
 
   state = {
@@ -133,12 +137,10 @@ class AccountApproval extends PureComponent {
     const { hostname } = new URL(prefixedUrl);
     this.checkUrlFlaggedAsPhishing(hostname);
 
-    InteractionManager.runAfterInteractions(() => {
-      AnalyticsV2.trackEvent(
-        MetaMetricsEvents.CONNECT_REQUEST_STARTED,
-        this.getAnalyticsParams(),
-      );
-    });
+    this.props.metrics.trackEvent(
+      MetaMetricsEvents.CONNECT_REQUEST_STARTED,
+      this.getAnalyticsParams(),
+    );
   };
 
   showWalletConnectNotification = (confirmation = false) => {
@@ -172,7 +174,7 @@ class AccountApproval extends PureComponent {
       // onConfirm will close current window by rejecting current approvalRequest.
       this.props.onCancel();
 
-      AnalyticsV2.trackEvent(
+      this.props.metrics.trackEvent(
         MetaMetricsEvents.CONNECT_REQUEST_OTPFAILURE,
         this.getAnalyticsParams(),
       );
@@ -193,7 +195,7 @@ class AccountApproval extends PureComponent {
     }
 
     this.props.onConfirm();
-    AnalyticsV2.trackEvent(
+    this.props.metrics.trackEvent(
       MetaMetricsEvents.CONNECT_REQUEST_COMPLETED,
       this.getAnalyticsParams(),
     );
@@ -204,7 +206,7 @@ class AccountApproval extends PureComponent {
    * Calls onConfirm callback and analytics to track connect canceled event
    */
   onCancel = () => {
-    AnalyticsV2.trackEvent(
+    this.props.metrics.trackEvent(
       MetaMetricsEvents.CONNECT_REQUEST_CANCELLED,
       this.getAnalyticsParams(),
     );
@@ -381,4 +383,4 @@ const mapStateToProps = (state) => ({
 
 AccountApproval.contextType = ThemeContext;
 
-export default connect(mapStateToProps)(AccountApproval);
+export default connect(mapStateToProps)(withMetricsAwareness(AccountApproval));
diff --git a/app/components/UI/AccountOverview/index.js b/app/components/UI/AccountOverview/index.js
@@ -37,7 +37,6 @@ import { ThemeContext, mockTheme } from '../../../util/theme';
 import EthereumAddress from '../EthereumAddress';
 import Identicon from '../Identicon';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import Analytics from '../../../core/Analytics/Analytics';
 import AppConstants from '../../../core/AppConstants';
 import Engine from '../../../core/Engine';
 import { selectChainId } from '../../../selectors/networkController';
@@ -51,6 +50,7 @@ import { regex } from '../../../util/regex';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
+import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -207,6 +207,10 @@ class AccountOverview extends PureComponent {
      * Current opens tabs in browser
      */
     browserTabs: PropTypes.array,
+    /**
+     * Metrics injected by withMetricsAwareness HOC
+     */
+    metrics: PropTypes.object,
   };
 
   state = {
@@ -302,9 +306,8 @@ class AccountOverview extends PureComponent {
       data: { msg: strings('account_details.account_copied_to_clipboard') },
     });
     setTimeout(() => this.props.protectWalletModalVisible(), 2000);
-    InteractionManager.runAfterInteractions(() => {
-      Analytics.trackEvent(MetaMetricsEvents.WALLET_COPIED_ADDRESS);
-    });
+
+    this.props.metrics.trackEvent(MetaMetricsEvents.WALLET_COPIED_ADDRESS);
   };
 
   doENSLookup = async () => {
@@ -337,7 +340,7 @@ class AccountOverview extends PureComponent {
       screen: Routes.BROWSER.VIEW,
       params,
     });
-    Analytics.trackEvent(MetaMetricsEvents.PORTFOLIO_LINK_CLICKED, {
+    this.props.metrics.trackEvent(MetaMetricsEvents.PORTFOLIO_LINK_CLICKED, {
       portfolioUrl: AppConstants.PORTFOLIO_URL,
     });
   };
@@ -478,4 +481,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 AccountOverview.contextType = ThemeContext;
 
-export default connect(mapStateToProps, mapDispatchToProps)(AccountOverview);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withMetricsAwareness(AccountOverview));
diff --git a/app/components/UI/AccountRightButton/index.tsx b/app/components/UI/AccountRightButton/index.tsx
@@ -35,8 +35,8 @@ import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrap
 import { selectProviderConfig } from '../../../selectors/networkController';
 import Routes from '../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import Analytics from '../../../core/Analytics/Analytics';
 import { AccountOverviewSelectorsIDs } from '../../../../e2e/selectors/AccountOverview.selectors';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const styles = StyleSheet.create({
   leftButton: {
@@ -66,6 +66,7 @@ const AccountRightButton = ({
   // Placeholder ref for dismissing keyboard. Works when the focused input is within a Webview.
   const placeholderInputRef = useRef<TextInput>(null);
   const { navigate } = useNavigation();
+  const { trackEvent } = useMetrics();
   const [isKeyboardVisible, setIsKeyboardVisible] = useState<boolean>(false);
 
   const accountAvatarType = useSelector((state: any) =>
@@ -122,12 +123,9 @@ const AccountRightButton = ({
       navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
         screen: Routes.SHEET.NETWORK_SELECTOR,
       });
-      Analytics.trackEventWithParameters(
-        MetaMetricsEvents.NETWORK_SELECTOR_PRESSED,
-        {
-          chain_id: providerConfig.chainId,
-        },
-      );
+      trackEvent(MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, {
+        chain_id: providerConfig.chainId,
+      });
     } else {
       onPress?.();
     }
@@ -138,6 +136,7 @@ const AccountRightButton = ({
     onPress,
     navigate,
     providerConfig.chainId,
+    trackEvent,
   ]);
 
   const networkName = useMemo(

diff --git a/app/components/UI/AddCustomCollectible/index.tsx b/app/components/UI/AddCustomCollectible/index.tsx
@@ -16,7 +16,6 @@ import ActionView from '../ActionView';
 import { isSmartContractAddress } from '../../../util/transactions';
 import Device from '../../../util/device';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import AnalyticsV2 from '../../../util/analyticsV2';
 
 import { useTheme } from '../../../util/theme';
 import { CUSTOM_TOKEN_CONTAINER_ID } from '../../../../wdio/screen-objects/testIDs/Screens/AddCustomToken.testIds';
@@ -30,6 +29,7 @@ import {
 import { selectChainId } from '../../../selectors/networkController';
 import { selectSelectedAddress } from '../../../selectors/preferencesController';
 import { getDecimalChainId } from '../../../util/networks';
+import { useMetrics } from '../../../components/hooks/useMetrics';
 
 const createStyles = (colors: any) =>
   StyleSheet.create({
@@ -82,6 +82,7 @@ const AddCustomCollectible = ({
   const [loading, setLoading] = useState(false);
   const assetTokenIdInput = React.createRef() as any;
   const { colors, themeAppearance } = useTheme();
+  const { trackEvent } = useMetrics();
   const styles = createStyles(colors);
 
   const selectedAddress = useSelector(selectSelectedAddress);
@@ -190,10 +191,7 @@ const AddCustomCollectible = ({
     const { NftController } = Engine.context as any;
     NftController.addNft(address, tokenId);
 
-    AnalyticsV2.trackEvent(
-      MetaMetricsEvents.COLLECTIBLE_ADDED,
-      getAnalyticsParams(),
-    );
+    trackEvent(MetaMetricsEvents.COLLECTIBLE_ADDED, getAnalyticsParams());
     setLoading(false);
     navigation.goBack();
   };