diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
index eb3d417ec9e9..515cb9618963 100644
--- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
+++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
@@ -1,12 +1,36 @@
import React from 'react';
+import { Analytics, TEvents } from '@deriv-com/analytics';
import { Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize } from '@deriv/translations';
+const trackAnalyticsEvent = (
+ action: TEvents['ce_tradershub_banner']['action'],
+ account_mode: TEvents['ce_tradershub_banner']['account_mode']
+) => {
+ Analytics.trackEvent('ce_tradershub_banner', {
+ action,
+ form_name: 'ce_tradershub_banner',
+ account_mode,
+ banner_name: 'setup_unsuccessful_wallets_step_3_2',
+ banner_type: 'with_cta',
+ });
+};
+
const WalletsBannerUnsuccessful = observer(() => {
const { traders_hub, ui } = useStore();
const { is_desktop } = ui;
- const { toggleWalletsUpgrade } = traders_hub;
+ const { is_demo, toggleWalletsUpgrade } = traders_hub;
+ const account_mode = is_demo ? 'demo' : 'real';
+
+ React.useEffect(() => {
+ trackAnalyticsEvent('open', account_mode);
+ }, [account_mode]);
+
+ const onWalletsUpgradeHandler = () => {
+ toggleWalletsUpgrade(true);
+ trackAnalyticsEvent('click_cta', account_mode);
+ };
return (
@@ -34,7 +58,7 @@ const WalletsBannerUnsuccessful = observer(() => {
line_height='s'
size={is_desktop ? 'xs' : 'xxxs'}
weight='bold'
- onClick={() => toggleWalletsUpgrade(true)}
+ onClick={onWalletsUpgradeHandler}
/>,
]}
/>
diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
index 019ec23214d3..79880cf0cccd 100644
--- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
+++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
@@ -1,8 +1,22 @@
import React from 'react';
+import { Analytics, TEvents } from '@deriv-com/analytics';
import { Button, Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize, localize } from '@deriv/translations';
+const trackAnalyticsEvent = (
+ action: TEvents['ce_tradershub_banner']['action'],
+ account_mode: TEvents['ce_tradershub_banner']['account_mode']
+) => {
+ Analytics.trackEvent('ce_tradershub_banner', {
+ action,
+ form_name: 'ce_tradershub_banner',
+ account_mode,
+ banner_name: 'lets_go_wallets_step_1_2',
+ banner_type: 'with_cta',
+ });
+};
+
type TProps = {
is_upgrading: boolean;
};
@@ -10,7 +24,17 @@ type TProps = {
const WalletsBannerUpgrade: React.FC
= observer(({ is_upgrading }) => {
const { traders_hub, ui } = useStore();
const { is_desktop, is_mobile } = ui;
- const { toggleWalletsUpgrade } = traders_hub;
+ const { is_demo, toggleWalletsUpgrade } = traders_hub;
+ const account_mode = is_demo ? 'demo' : 'real';
+
+ React.useEffect(() => {
+ trackAnalyticsEvent('open', account_mode);
+ }, [account_mode]);
+
+ const onWalletsUpgradeHandler = () => {
+ toggleWalletsUpgrade(true);
+ trackAnalyticsEvent('click_cta', account_mode);
+ };
return (
@@ -30,7 +54,7 @@ const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => {
text={localize("Let's go")}
primary
large
- onClick={() => toggleWalletsUpgrade(true)}
+ onClick={onWalletsUpgradeHandler}
/>
{
- const { ui } = useStore();
+ const { traders_hub, ui } = useStore();
+ const { is_demo } = traders_hub;
const { is_desktop, is_mobile } = ui;
+ React.useEffect(() => {
+ Analytics.trackEvent('ce_tradershub_banner', {
+ action: 'open',
+ form_name: 'ce_tradershub_banner',
+ account_mode: is_demo ? 'demo' : 'real',
+ banner_name: 'setting_up_wallets_step_2',
+ banner_type: 'without_url',
+ });
+ }, [is_demo]);
+
return (
diff --git a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx
index fdd6d6010f5f..a03297237aa5 100644
--- a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx
+++ b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { Analytics, TEvents } from '@deriv-com/analytics';
import classNames from 'classnames';
import { Stream } from '@cloudflare/stream-react';
import { Button, Text, Modal } from '@deriv/components';
@@ -7,13 +8,34 @@ import { observer, useStore } from '@deriv/stores';
import { useWalletMigration } from '@deriv/hooks';
import './wallets-upgrade-modal.scss';
+const trackAnalyticsEvent = (
+ action: TEvents['ce_tradershub_popup']['action'],
+ account_mode: TEvents['ce_tradershub_popup']['account_mode']
+) => {
+ Analytics.trackEvent('ce_tradershub_popup', {
+ action,
+ form_name: 'ce_tradershub_popup',
+ account_mode,
+ popup_name: 'introducing_wallets_step_1',
+ popup_type: 'with_cta',
+ });
+};
+
const WalletsUpgradeModal = observer(() => {
const { traders_hub, ui } = useStore();
- const { is_real_wallets_upgrade_on, toggleWalletsUpgrade } = traders_hub;
+ const { is_demo, is_real_wallets_upgrade_on, toggleWalletsUpgrade } = traders_hub;
const { is_desktop } = ui;
const { is_eligible, startMigration } = useWalletMigration();
+ const account_mode = is_demo ? 'demo' : 'real';
const isWalletMigrationModalClosed = localStorage.getItem('is_wallet_migration_modal_closed');
const [modalOpen, setModalOpen] = React.useState(!isWalletMigrationModalClosed);
+ const is_open = (is_eligible && modalOpen) || is_real_wallets_upgrade_on;
+
+ React.useEffect(() => {
+ if (is_open) {
+ trackAnalyticsEvent('open', account_mode);
+ }
+ }, [account_mode, is_open]);
const closeModal = () => {
setModalOpen(false);
@@ -24,15 +46,21 @@ const WalletsUpgradeModal = observer(() => {
const handleMigration = () => {
closeModal();
startMigration();
+ trackAnalyticsEvent('click_cta', account_mode);
+ };
+
+ const onToggleModalHandler = () => {
+ closeModal();
+ trackAnalyticsEvent('close', account_mode);
};
return (
diff --git a/packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx b/packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx
index 41fa94b2148d..b6156ad53c73 100644
--- a/packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx
+++ b/packages/core/src/App/Containers/Modals/wallets-upgrade-logout-modal/wallets-upgrade-logout-modal.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { Analytics, TEvents } from '@deriv-com/analytics';
import Cookies from 'js-cookie';
import { Dialog, Icon, Text } from '@deriv/components';
import { redirectToLogin, routes } from '@deriv/shared';
@@ -6,26 +7,47 @@ import { observer, useStore } from '@deriv/stores';
import { getLanguage, localize, Localize } from '@deriv/translations';
import './wallets-upgrade-logout-modal.scss';
+const trackAnalyticsEvent = (
+ action: TEvents['ce_tradershub_popup']['action'],
+ account_mode: TEvents['ce_tradershub_popup']['account_mode']
+) => {
+ Analytics.trackEvent('ce_tradershub_popup', {
+ action,
+ form_name: 'ce_tradershub_popup',
+ account_mode,
+ popup_name: 'almost_there_wallets_step_3_1',
+ popup_type: 'with_cta',
+ });
+};
+
const WalletsUpgradeLogoutModal = observer(() => {
const { client, ui } = useStore();
- const { logout } = client;
+ const { is_virtual, logout } = client;
const { is_desktop } = ui;
+ const account_mode = is_virtual ? 'demo' : 'real';
+
+ React.useEffect(() => {
+ trackAnalyticsEvent('open', account_mode);
+ }, [account_mode]);
+
+ const onConfirmHandler = () => {
+ Cookies.set('recent_wallets_migration', 'true', {
+ path: '/', // not available on other subdomains
+ expires: 0.5, // 12 hours expiration time
+ secure: true,
+ });
+ logout().then(() => {
+ window.location.href = routes.traders_hub;
+ redirectToLogin(false, getLanguage());
+ });
+ trackAnalyticsEvent('click_cta', account_mode);
+ };
return (