Skip to content

Commit

Permalink
feat: migration of analytics of NavBar, NavBarTitle, LedgerConfirmati…
Browse files Browse the repository at this point in the history 
…onModal (#8655)

NavBar, NavBarTitle, LedgerConfirmationModal components under UI folder,
with new Segment metrics.
  • Loading branch information
@tommasini
tommasini authored Feb 23, 2024
1 parent 8f01e5f commit b1d2b64
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 60 deletions.
24 changes: 12 additions & 12 deletions app/components/UI/EnableAutomaticSecurityChecksModal/EnableAutomaticSecurityChecksModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
userSelectedAutomaticSecurityChecksOptions,
} from '../../../actions/security';
import { MetaMetricsEvents } from '../../../core/Analytics';
import AnalyticsV2 from '../../../util/analyticsV2';

import { ScrollView } from 'react-native-gesture-handler';
import {
Expand All @@ -31,6 +30,7 @@ import {

import generateTestId from '../../../../wdio/utils/generateTestId';
import generateDeviceAnalyticsMetaData from '../../../util/metrics';
import { useMetrics } from '../../../components/hooks/useMetrics';

/* eslint-disable import/no-commonjs, @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */
const onboardingDeviceImage = require('../../../images/swaps_onboard_device.png');
Expand All @@ -43,6 +43,7 @@ export const createEnableAutomaticSecurityChecksModalNavDetails =

const EnableAutomaticSecurityChecksModal = () => {
const { colors } = useTheme();
const { trackEvent } = useMetrics();
const styles = createStyles(colors);
const modalRef = useRef<ReusableModalRef | null>(null);
const dispatch = useDispatch();
Expand All @@ -51,11 +52,10 @@ const EnableAutomaticSecurityChecksModal = () => {
modalRef?.current?.dismissModal(cb);

useEffect(() => {
AnalyticsV2.trackEvent(
MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_PROMPT_VIEWED,
generateDeviceAnalyticsMetaData(),
);
}, []);
trackEvent(MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_PROMPT_VIEWED, {
...generateDeviceAnalyticsMetaData(),
});
}, [trackEvent]);

useEffect(() => {
dispatch(setAutomaticSecurityChecksModalOpen(true));
Expand All @@ -67,25 +67,25 @@ const EnableAutomaticSecurityChecksModal = () => {
const triggerCloseAndDisableAutomaticSecurityChecks = useCallback(
() =>
dismissModal(() => {
AnalyticsV2.trackEvent(
trackEvent(
MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_DISABLED_FROM_PROMPT,
generateDeviceAnalyticsMetaData(),
{ ...generateDeviceAnalyticsMetaData() },
);
dispatch(userSelectedAutomaticSecurityChecksOptions());
}),
[dispatch],
[dispatch, trackEvent],
);

const enableAutomaticSecurityChecks = useCallback(() => {
dismissModal(() => {
AnalyticsV2.trackEvent(
trackEvent(
MetaMetricsEvents.AUTOMATIC_SECURITY_CHECKS_ENABLED_FROM_PROMPT,
generateDeviceAnalyticsMetaData(),
{ ...generateDeviceAnalyticsMetaData() },
);
dispatch(userSelectedAutomaticSecurityChecksOptions());
dispatch(setAutomaticSecurityChecks(true));
});
}, [dispatch]);
}, [dispatch, trackEvent]);

return (
<ReusableModal ref={modalRef} style={styles.screen}>
Expand Down
20 changes: 9 additions & 11 deletions app/components/UI/LedgerModals/LedgerConfirmationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import OpenETHAppStep from './Steps/OpenETHAppStep';
import SearchingForDeviceStep from './Steps/SearchingForDeviceStep';
import { unlockLedgerDefaultAccount } from '../../../core/Ledger/Ledger';
import { MetaMetricsEvents } from '../../../core/Analytics';
import AnalyticsV2 from '../../../util/analyticsV2';
import { useMetrics } from '../../../components/hooks/useMetrics';

const createStyles = (colors: Colors) =>
StyleSheet.create({
Expand Down Expand Up @@ -46,6 +46,7 @@ const LedgerConfirmationModal = ({
}: LedgerConfirmationModalProps) => {
const { colors } = useAppThemeFromContext() || mockTheme;
const styles = useMemo(() => createStyles(colors), [colors]);
const { trackEvent } = useMetrics();
const [permissionErrorShown, setPermissionErrorShown] = useState(false);
const {
isSendingLedgerCommands,
Expand Down Expand Up @@ -76,7 +77,7 @@ const LedgerConfirmationModal = ({
} catch (_e) {
// Handle a super edge case of the user starting a transaction with the device connected
// After arriving to confirmation the ETH app is not installed anymore this causes a crash.
AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
device_type: 'Ledger',
error: 'LEDGER_ETH_APP_NOT_INSTALLED',
});
Expand All @@ -88,12 +89,9 @@ const LedgerConfirmationModal = ({
try {
onRejection();
} finally {
AnalyticsV2.trackEvent(
MetaMetricsEvents.LEDGER_HARDWARE_TRANSACTION_CANCELLED,
{
device_type: 'Ledger',
},
);
trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_TRANSACTION_CANCELLED, {
device_type: 'Ledger',
});
}
};

Expand Down Expand Up @@ -180,7 +178,7 @@ const LedgerConfirmationModal = ({
break;
}
if (ledgerError !== LedgerCommunicationErrors.UserRefusedConfirmation) {
AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
device_type: 'Ledger',
error: `${ledgerError}`,
});
Expand All @@ -203,7 +201,7 @@ const LedgerConfirmationModal = ({
break;
}
setPermissionErrorShown(true);
AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
device_type: 'Ledger',
error: 'LEDGER_BLUETOOTH_PERMISSION_ERR',
});
Expand All @@ -214,7 +212,7 @@ const LedgerConfirmationModal = ({
title: strings('ledger.bluetooth_off'),
subtitle: strings('ledger.bluetooth_off_message'),
});
AnalyticsV2.trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
trackEvent(MetaMetricsEvents.LEDGER_HARDWARE_WALLET_ERROR, {
device_type: 'Ledger',
error: 'LEDGER_BLUETOOTH_CONNECTION_ERR',
});
Expand Down
40 changes: 10 additions & 30 deletions app/components/UI/Navbar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import AccountRightButton from '../AccountRightButton';
import {
Alert,
Image,
InteractionManager,
Platform,
StyleSheet,
Text,
Expand All @@ -21,8 +20,7 @@ import { scale } from 'react-native-size-matters';
import { strings } from '../../../../locales/i18n';
import AppConstants from '../../../core/AppConstants';
import DeeplinkManager from '../../../core/DeeplinkManager/SharedDeeplinkManager';
import Analytics from '../../../core/Analytics/Analytics';
import { MetaMetricsEvents } from '../../../core/Analytics';
import { MetaMetrics, MetaMetricsEvents } from '../../../core/Analytics';
import { importAccountFromPrivateKey } from '../../../util/address';
import Device from '../../../util/device';
import PickerNetwork from '../../../component-library/components/Pickers/PickerNetwork';
Expand Down Expand Up @@ -52,16 +50,8 @@ import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/WalletView.selectors';
import { NetworksViewSelectorsIDs } from '../../../../e2e/selectors/Settings/NetworksView.selectors';

const trackEvent = (event) => {
InteractionManager.runAfterInteractions(() => {
Analytics.trackEvent(event);
});
};

const trackEventWithParameters = (event, params) => {
InteractionManager.runAfterInteractions(() => {
Analytics.trackEventWithParameters(event, params);
});
const trackEvent = (event, params = {}) => {
MetaMetrics.getInstance().trackEvent(event, params);
};

const styles = StyleSheet.create({
Expand Down Expand Up @@ -533,7 +523,7 @@ export function getSendFlowTitle(
});
const rightAction = () => {
const providerType = route?.params?.providerType ?? '';
trackEventWithParameters(MetaMetricsEvents.SEND_FLOW_CANCEL, {
trackEvent(MetaMetricsEvents.SEND_FLOW_CANCEL, {
view: title.split('.')[1],
network: providerType,
});
Expand Down Expand Up @@ -1386,14 +1376,9 @@ export function getSwapsQuotesNavbar(navigation, route, themeColors) {
const selectedQuote = route.params?.selectedQuote;
const quoteBegin = route.params?.quoteBegin;
if (!selectedQuote) {
InteractionManager.runAfterInteractions(() => {
Analytics.trackEventWithParameters(
MetaMetricsEvents.QUOTES_REQUEST_CANCELLED,
{
...trade,
responseTime: new Date().getTime() - quoteBegin,
},
);
trackEvent(MetaMetricsEvents.QUOTES_REQUEST_CANCELLED, {
...trade,
responseTime: new Date().getTime() - quoteBegin,
});
}
navigation.pop();
Expand All @@ -1404,14 +1389,9 @@ export function getSwapsQuotesNavbar(navigation, route, themeColors) {
const selectedQuote = route.params?.selectedQuote;
const quoteBegin = route.params?.quoteBegin;
if (!selectedQuote) {
InteractionManager.runAfterInteractions(() => {
Analytics.trackEventWithParameters(
MetaMetricsEvents.QUOTES_REQUEST_CANCELLED,
{
...trade,
responseTime: new Date().getTime() - quoteBegin,
},
);
trackEvent(MetaMetricsEvents.QUOTES_REQUEST_CANCELLED, {
...trade,
responseTime: new Date().getTime() - quoteBegin,
});
}
navigation.dangerouslyGetParent()?.pop();
Expand Down
2 changes: 1 addition & 1 deletion app/components/UI/NavbarTitle/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ exports[`NavbarTitle should render correctly 1`] = `
}
}
>
<withNavigation(Connect(NavbarTitle))
<withNavigation(Connect(Component))
title="Test"
/>
</ContextProvider>
Expand Down
12 changes: 9 additions & 3 deletions app/components/UI/NavbarTitle/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import { ThemeContext, mockTheme } from '../../../util/theme';
import { NAVBAR_TITLE_NETWORKS_TEXT } from '../../../../wdio/screen-objects/testIDs/Screens/WalletScreen-testIds';
import Routes from '../../../constants/navigation/Routes';
import { MetaMetricsEvents } from '../../../core/Analytics';
import Analytics from '../../../core/Analytics/Analytics';
import { withNavigation } from '@react-navigation/compat';
import { selectProviderConfig } from '../../../selectors/networkController';
import { withMetricsAwareness } from '../../../components/hooks/useMetrics';

const createStyles = (colors) =>
StyleSheet.create({
Expand Down Expand Up @@ -75,6 +75,10 @@ class NavbarTitle extends PureComponent {
* Object that represents the navigator
*/
navigation: PropTypes.object,
/**
* Metrics injected by withMetricsAwareness HOC
*/
metrics: PropTypes.object,
};

static defaultProps = {
Expand All @@ -91,7 +95,7 @@ class NavbarTitle extends PureComponent {
screen: Routes.SHEET.NETWORK_SELECTOR,
});

Analytics.trackEventWithParameters(
this.props.metrics.trackEvent(
MetaMetricsEvents.NETWORK_SELECTOR_PRESSED,
{
chain_id: getDecimalChainId(this.props.providerConfig.chainId),
Expand Down Expand Up @@ -160,4 +164,6 @@ const mapStateToProps = (state) => ({
providerConfig: selectProviderConfig(state),
});

export default withNavigation(connect(mapStateToProps)(NavbarTitle));
export default withNavigation(
connect(mapStateToProps)(withMetricsAwareness(NavbarTitle)),
);
6 changes: 3 additions & 3 deletions app/components/UI/NetworkModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
ButtonSize,
ButtonVariants,
} from '../../../component-library/components/Buttons/Button';
import AnalyticsV2 from '../../../util/analyticsV2';

import { useTheme } from '../../../util/theme';
import { networkSwitched } from '../../../actions/onboardNetwork';
Expand All @@ -33,6 +32,7 @@ import { ButtonProps } from '../../../component-library/components/Buttons/Butto
import checkSafeNetwork from '../../../core/RPCMethods/networkChecker.util';
import NetworkVerificationInfo from '../NetworkVerificationInfo';
import createNetworkModalStyles from './index.styles';
import { useMetrics } from '../../../components/hooks/useMetrics';

interface NetworkProps {
isVisible: boolean;
Expand All @@ -59,7 +59,7 @@ const NetworkModals = (props: NetworkProps) => {
shouldNetworkSwitchPopToWallet,
onNetworkSwitch,
} = props;

const { trackEvent } = useMetrics();
const [showDetails, setShowDetails] = React.useState(false);
const [networkAdded, setNetworkAdded] = React.useState(false);
const [showCheckNetwork, setShowCheckNetwork] = React.useState(false);
Expand Down Expand Up @@ -191,7 +191,7 @@ const NetworkModals = (props: NetworkProps) => {
symbol: ticker,
};

AnalyticsV2.trackEvent(MetaMetricsEvents.NETWORK_ADDED, analyticsParamsAdd);
trackEvent(MetaMetricsEvents.NETWORK_ADDED, analyticsParamsAdd);

closeModal();
if (onNetworkSwitch) {
Expand Down

0 comments on commit b1d2b64

Please sign in to comment.