diff --git a/app/component-library/components-temp/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx b/app/component-library/components-temp/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx index bfc064931ee..748463f59a0 100644 --- a/app/component-library/components-temp/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx +++ b/app/component-library/components-temp/KeyValueRow/KeyValueLabel/KeyValueLabel.tsx @@ -35,6 +35,7 @@ const KeyValueRowLabel = ({ label, tooltip }: KeyValueRowLabelProps) => { const onNavigateToTooltipModal = () => { if (!hasTooltip) return; openTooltipModal(tooltip.title, tooltip.content); + tooltip?.onPress?.(); }; return ( diff --git a/app/component-library/components-temp/KeyValueRow/KeyValueRow.types.ts b/app/component-library/components-temp/KeyValueRow/KeyValueRow.types.ts index fc4e825921e..b04e893bd62 100644 --- a/app/component-library/components-temp/KeyValueRow/KeyValueRow.types.ts +++ b/app/component-library/components-temp/KeyValueRow/KeyValueRow.types.ts @@ -27,6 +27,10 @@ interface KeyValueRowTooltip { * @default TooltipSizes.Md */ size?: ButtonIconSizes; + /** + * Optional onPress handler + */ + onPress?: (...args: unknown[]) => unknown; } /** diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx index 9c5e09462fa..56c3cc749ae 100644 --- a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx +++ b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx @@ -19,6 +19,7 @@ import styleSheet from './StakeInputView.styles'; import useStakingInputHandlers from '../../hooks/useStakingInput'; import InputDisplay from '../../components/InputDisplay'; import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics'; +import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics'; const StakeInputView = () => { const title = strings('stake.stake_eth'); @@ -55,15 +56,6 @@ const StakeInputView = () => { navigation.navigate('StakeModals', { screen: Routes.STAKING.MODALS.LEARN_MORE, }); - trackEvent( - createEventBuilder(MetaMetricsEvents.STAKE_LEARN_MORE_CLICKED) - .addProperties({ - selected_provider: 'consensys', - text: 'Tooltip Question Mark Trigger', - location: 'Stake Input View', - }) - .build(), - ); }; const handleStakePress = useCallback(() => { @@ -153,13 +145,30 @@ const StakeInputView = () => { fiatAmount={fiatAmount} isEth={isEth} currentCurrency={currentCurrency} - handleCurrencySwitch={handleCurrencySwitch} + handleCurrencySwitch={withMetaMetrics(handleCurrencySwitch, { + event: MetaMetricsEvents.STAKE_INPUT_CURRENCY_SWITCH_CLICKED, + properties: { + selected_provider: 'consensys', + text: 'Currency Switch Trigger', + location: 'Stake Input View', + // We want to track the currency switching to. Not the current currency. + currency_type: isEth ? 'fiat' : 'native', + }, + })} currencyToggleValue={currencyToggleValue} /> diff --git a/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap b/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap index 0193ba5abe1..fb47e1bf1c1 100644 --- a/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap +++ b/app/components/UI/Stake/Views/StakeInputView/__snapshots__/StakeInputView.test.tsx.snap @@ -567,7 +567,7 @@ exports[`StakeInputView render matches snapshot 1`] = ` onPress={[Function]} > { const title = strings('stake.unstake_eth'); @@ -68,14 +69,21 @@ const UnstakeInputView = () => { }); trackEvent( createEventBuilder(MetaMetricsEvents.REVIEW_UNSTAKE_BUTTON_CLICKED) - .addProperties({ - selected_provider: 'consensys', - tokens_to_stake_native_value: amountEth, - tokens_to_stake_usd_value: fiatAmount, - }) - .build(), + .addProperties({ + selected_provider: 'consensys', + tokens_to_stake_native_value: amountEth, + tokens_to_stake_usd_value: fiatAmount, + }) + .build(), ); - }, [amountEth, amountWei, createEventBuilder, fiatAmount, navigation, trackEvent]); + }, [ + amountEth, + amountWei, + createEventBuilder, + fiatAmount, + navigation, + trackEvent, + ]); return ( @@ -88,7 +96,16 @@ const UnstakeInputView = () => { fiatAmount={fiatAmount} isEth={isEth} currentCurrency={currentCurrency} - handleCurrencySwitch={handleCurrencySwitch} + handleCurrencySwitch={withMetaMetrics(handleCurrencySwitch, { + event: MetaMetricsEvents.UNSTAKE_INPUT_CURRENCY_SWITCH_CLICKED, + properties: { + selected_provider: 'consensys', + text: 'Currency Switch Trigger', + location: 'Unstake Input View', + // We want to track the currency switching to. Not the current currency. + currency_type: isEth ? 'fiat' : 'native', + }, + })} currencyToggleValue={currencyToggleValue} /> diff --git a/app/components/UI/Stake/components/EstimatedAnnualRewardsCard.tsx b/app/components/UI/Stake/components/EstimatedAnnualRewardsCard.tsx index 7c2b306cef3..92cc7b63ba3 100644 --- a/app/components/UI/Stake/components/EstimatedAnnualRewardsCard.tsx +++ b/app/components/UI/Stake/components/EstimatedAnnualRewardsCard.tsx @@ -69,7 +69,7 @@ const EstimatedAnnualRewardsCard = ({ > diff --git a/app/components/UI/Stake/components/LearnMoreModal/index.tsx b/app/components/UI/Stake/components/LearnMoreModal/index.tsx index b33f5aeba49..eb321f8d238 100644 --- a/app/components/UI/Stake/components/LearnMoreModal/index.tsx +++ b/app/components/UI/Stake/components/LearnMoreModal/index.tsx @@ -17,7 +17,8 @@ import { useNavigation } from '@react-navigation/native'; import { strings } from '../../../../../../locales/i18n'; import { POOLED_STAKING_FAQ_URL } from '../../constants'; import createLearnMoreModalStyles from './LearnMoreModal.styles'; -import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics'; +import { MetaMetricsEvents } from '../../../../hooks/useMetrics'; +import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics'; const styles = createLearnMoreModalStyles(); @@ -42,12 +43,21 @@ const LearnMoreModal = () => { const sheetRef = useRef(null); const navigation = useNavigation(); - const { trackEvent, createEventBuilder } = useMetrics(); const handleClose = () => { sheetRef.current?.onCloseBottomSheet(); }; + const handleLearnMoreBrowserRedirect = () => { + // Take to the faq page + navigation.navigate('Webview', { + screen: 'SimpleWebview', + params: { + url: POOLED_STAKING_FAQ_URL, + }, + }); + }; + return ( @@ -86,23 +96,14 @@ const LearnMoreModal = () => {