feat(wallet): add openedLink tracking and expand openedApplication coverage

apps/wallet/src/shared/analytics/ampli/index.ts

@@ -227,6 +227,10 @@ export interface OpenedConnectLedgerFlowProperties {
     sourceFlow?: string;
 }
 
+export interface OpenedLinkProperties {
+    url: string;
+}
+
 export interface OpenedWalletExtensionProperties {
     activeAccountType?: string;
     activeNetwork?: string;
@@ -484,6 +488,14 @@ export class OpenedConnectLedgerFlow implements BaseEvent {
     }
 }
 
+export class OpenedLink implements BaseEvent {
+    event_type = 'opened link';
+
+    constructor(public event_properties: OpenedLinkProperties) {
+        this.event_properties = event_properties;
+    }
+}
+
 export class OpenedWalletExtension implements BaseEvent {
     event_type = 'opened wallet extension';
 
@@ -948,6 +960,23 @@ export class Ampli {
     return this.track(new OpenedConnectLedgerFlow(properties), options);
   }
 
+  /**
+   * opened link
+   *
+   * [View in Tracking Plan](https://data.eu.amplitude.com/iota-foundation/IOTA%20Wallet/events/main/latest/opened%20link)
+   *
+   * Event has no description in tracking plan.
+   *
+   * @param properties The event's properties (e.g. url)
+   * @param options Amplitude event options.
+   */
+  openedLink(
+    properties: OpenedLinkProperties,
+    options?: EventOptions,
+  ) {
+    return this.track(new OpenedLink(properties), options);
+  }
+
   /**
    * opened wallet extension
    *

apps/wallet/src/ui/app/components/DAppInfoCard.tsx

@@ -13,6 +13,7 @@ import { DAppPermissionList } from './DAppPermissionList';
 import { SummaryCard } from './SummaryCard';
 import { Link } from 'react-router-dom';
 import { ImageIcon } from '@iota/core';
+import { ampli } from '_src/shared/analytics/ampli';
 
 export interface DAppInfoCardProps {
     name: string;
@@ -53,6 +54,9 @@ export function DAppInfoCard({
                             to={validDAppUrl?.toString() ?? url}
                             target="_blank"
                             rel="noopener noreferrer"
+                            onClick={() => {
+                                ampli.openedApplication({ applicationName: name });
+                            }}
                         >
                             {validDAppUrl?.toString() ?? url}
                         </Link>

apps/wallet/src/ui/app/components/external-link/index.tsx

@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ReactNode } from 'react';
+import { ampli } from '_src/shared/analytics/ampli';
 
 export interface ExternalLinkProps {
     href: string;
@@ -13,14 +14,19 @@ export interface ExternalLinkProps {
 }
 
 export function ExternalLink({ href, className, children, title, onClick }: ExternalLinkProps) {
+    const handleClick = () => {
+        ampli.openedLink({ url: href });
+        onClick?.();
+    };
+
     return (
         <a
             href={href}
             target="_blank"
             className={className}
             rel="noreferrer noopener"
             title={title}
-            onClick={onClick}
+            onClick={handleClick}
         >
             {children}
         </a>

apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx

@@ -92,10 +92,12 @@ export function MenuList() {
     }
 
     function onSupportClick() {
+        ampli.openedLink({ url: DISCORD_SUPPORT_LINK });
         window.open(DISCORD_SUPPORT_LINK, '_blank', 'noopener noreferrer');
     }
 
     function onFAQClick() {
+        ampli.openedLink({ url: FAQ_LINK });
         window.open(FAQ_LINK, '_blank', 'noopener noreferrer');
     }
 

apps/wallet/src/ui/app/pages/home/nft-details/index.tsx

@@ -9,6 +9,7 @@ import { formatAddress } from '@iota/iota-sdk/utils';
 import cl from 'clsx';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import { Button, ButtonType, KeyValueInfo } from '@iota/apps-ui-kit';
+import { ampli } from '_src/shared/analytics/ampli';
 
 export function NFTDetailsPage() {
     const navigate = useNavigate();
@@ -32,20 +33,16 @@ export function NFTDetailsPage() {
     const isPending = isLoading || isGuardLoading;
 
     function handleMoreAboutKiosk() {
-        window.open(
-            'https://docs.iota.org/developer/ts-sdk/kiosk/',
-            '_blank',
-            'noopener noreferrer',
-        );
+        const url = 'https://docs.iota.org/developer/ts-sdk/kiosk/';
+        ampli.openedLink({ url });
+        window.open(url, '_blank', 'noopener noreferrer');
     }
 
     function handleMarketplace() {
         // TODO: https://github.com/iotaledger/iota/issues/4024
-        window.open(
-            'https://docs.iota.org/developer/ts-sdk/kiosk/',
-            '_blank',
-            'noopener noreferrer',
-        );
+        const url = 'https://docs.iota.org/developer/ts-sdk/kiosk/';
+        ampli.openedLink({ url });
+        window.open(url, '_blank', 'noopener noreferrer');
     }
 
     function handleSend() {

apps/wallet/src/ui/app/pages/home/tokens/MigrationDialog.tsx

@@ -6,6 +6,7 @@ import { Button, Dialog, DialogContent, DialogBody, Header, Panel } from '@iota/
 import { Banner, BannerSize, Theme, useTheme } from '@iota/core';
 import { WALLET_DASHBOARD_URL } from '_src/shared/constants';
 import { Link } from 'react-router-dom';
+import { ampli } from '_src/shared/analytics/ampli';
 
 interface MigrationDialogProps {
     open: boolean;
@@ -21,6 +22,7 @@ export function MigrationDialog({ open, setOpen }: MigrationDialogProps) {
             : 'https://files.iota.org/media/tooling/wallet-dashboard-migration-light.mp4';
 
     function navigateToDashboard() {
+        ampli.openedLink({ url: WALLET_DASHBOARD_URL });
         window.open(WALLET_DASHBOARD_URL, '_blank', 'noopener noreferrer');
     }
     return (

apps/wallet/src/ui/app/pages/home/tokens/SupplyIncreaseVestingStakingDialog.tsx

@@ -6,6 +6,7 @@ import { Button, Dialog, DialogContent, DialogBody, Header, Panel } from '@iota/
 import { Banner, BannerSize, Theme, useTheme } from '@iota/core';
 import { WALLET_DASHBOARD_URL } from '_src/shared/constants';
 import { Link } from 'react-router-dom';
+import { ampli } from '_src/shared/analytics/ampli';
 
 interface SupplyIncreaseVestingStakingDialogProps {
     open: boolean;
@@ -24,6 +25,7 @@ export function SupplyIncreaseVestingStakingDialog({
             : 'https://files.iota.org/media/tooling/wallet-dashboard-staking-light.mp4';
 
     function navigateToDashboard() {
+        ampli.openedLink({ url: WALLET_DASHBOARD_URL });
         window.open(WALLET_DASHBOARD_URL, '_blank', 'noopener noreferrer');
     }
     return (