add matomo tracking to quick dapp v2

apps/quick-dapp-v2/src/components/ChatBox/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { Form, Button, Card } from 'react-bootstrap';
 import { FormattedMessage, useIntl } from 'react-intl';
 import './ChatBox.css';
+import { trackMatomoEvent } from '@remix-api'
 
 interface Message {
   id: string;
@@ -33,6 +34,13 @@ const ChatBox: React.FC<ChatBoxProps> = ({ onSendMessage, onUpdateCode }) => {
   const handleSendMessage = async () => {
     if (!inputMessage.trim()) return;
 
+    trackMatomoEvent(this, {
+      category: 'quick-dapp-v2',
+      action: 'update',
+      name: 'chat_request',
+      isClick: true
+    })
+
     const newMessage: Message = {
       id: Date.now().toString(),
       role: 'user',

apps/quick-dapp-v2/src/components/DeployPanel/index.tsx

@@ -9,6 +9,7 @@ import {
 import { AppContext } from '../../contexts';
 import { readDappFiles } from '../EditHtmlTemplate';
 import { InBrowserVite } from '../../InBrowserVite';
+import { trackMatomoEvent } from '@remix-api'
 
 // const REMIX_ENDPOINT_IPFS = 'http://localhost:4000/quickdapp-ipfs';
 // const REMIX_ENDPOINT_ENS = 'http://localhost:4000/ens-service';
@@ -94,6 +95,14 @@ function DeployPanel(): JSX.Element {
     }
 
     try {
+
+      trackMatomoEvent(this, {
+        category: 'quick-dapp-v2',
+        action: 'deploy_ipfs',
+        name: 'start',
+        isClick: true
+      })
+
       const indexHtmlContent = filesMap.get('/index.html');
       if (!indexHtmlContent) {
         throw new Error("Cannot find index.html");
@@ -157,6 +166,12 @@ function DeployPanel(): JSX.Element {
         error: '' 
       });
 
+      trackMatomoEvent(this, {
+        category: 'quick-dapp-v2',
+        action: 'deploy_ipfs',
+        name: 'success',
+        isClick: false
+      })
     } catch (e: any) {
       console.error(e);
       setDeployResult({ cid: '', gatewayUrl: '', error: `Upload failed: ${e.message}` });
@@ -190,6 +205,12 @@ function DeployPanel(): JSX.Element {
     }
 
     try {
+      trackMatomoEvent(this, {
+        category: 'quick-dapp-v2',
+        action: 'register_ens',
+        name: 'start',
+        isClick: true
+      })
       const provider = new ethers.BrowserProvider(window.ethereum as any);
       const accounts = await provider.send('eth_requestAccounts', []);
       const ownerAddress = accounts[0];
@@ -219,6 +240,12 @@ function DeployPanel(): JSX.Element {
         domain: data.domain
       });
 
+      trackMatomoEvent(this, {
+        category: 'quick-dapp-v2',
+        action: 'register_ens',
+        name: 'success',
+        isClick: false
+      })
     } catch (e: any) {
       console.error(e);
       setEnsResult({ ...ensResult, error: `ENS Error: ${e.message}` });

libs/remix-api/src/lib/plugins/matomo/core/categories.ts

@@ -30,7 +30,8 @@ export const MatomoCategories = {
   SCRIPT_EXECUTOR: 'ScriptExecutor' as const,
   LOCALE_MODULE: 'localeModule' as const,
   THEME_MODULE: 'themeModule' as const,
-  STATUS_BAR: 'statusBar' as const
+  STATUS_BAR: 'statusBar' as const,
+  QUICK_DAPP_V2: 'quick-dapp-v2' as const
 }
 
 // Common action constants used across multiple categories

libs/remix-api/src/lib/plugins/matomo/events/tools-events.ts

@@ -285,3 +285,16 @@ export interface ScriptRunnerPluginEvent extends MatomoEventBase {
     | 'configChanged';
 }
 
+
+/**
+ * Quick DApp V2 Events - Type-safe builders
+ */
+export interface QuickDappV2Event extends MatomoEventBase {
+  category: 'quick-dapp-v2';
+  action:
+    | 'generate'
+    | 'update'
+    | 'deploy_ipfs'
+    | 'register_ens'
+    | 'error';
+}

libs/remix-api/src/lib/plugins/matomo/index.ts

@@ -34,7 +34,7 @@ import type { HomeTabEvent, TopbarEvent, LayoutEvent, SettingsEvent, ThemeEvent,
 import type { FileExplorerEvent, WorkspaceEvent, StorageEvent, BackupEvent } from './events/file-events';
 import type { BlockchainEvent, UdappEvent, RunEvent } from './events/blockchain-events';
 import type { PluginEvent, ManagerEvent, PluginManagerEvent, AppEvent, MatomoManagerEvent, PluginPanelEvent, MigrateEvent } from './events/plugin-events';
-import type { DebuggerEvent, EditorEvent, SolidityUnitTestingEvent, SolidityStaticAnalyzerEvent, DesktopDownloadEvent, XTERMEvent, SolidityScriptEvent, RemixGuideEvent, TemplateSelectionEvent, ScriptExecutorEvent, GridViewEvent, SolidityUMLGenEvent, ScriptRunnerPluginEvent, CircuitCompilerEvent, NoirCompilerEvent, ContractVerificationEvent, LearnethEvent, TemplateExplorerModalEvent } from './events/tools-events';
+import type { DebuggerEvent, EditorEvent, SolidityUnitTestingEvent, SolidityStaticAnalyzerEvent, DesktopDownloadEvent, XTERMEvent, SolidityScriptEvent, RemixGuideEvent, TemplateSelectionEvent, ScriptExecutorEvent, GridViewEvent, SolidityUMLGenEvent, ScriptRunnerPluginEvent, CircuitCompilerEvent, NoirCompilerEvent, ContractVerificationEvent, LearnethEvent, TemplateExplorerModalEvent, QuickDappV2Event } from './events/tools-events';
 
 // Union type of all Matomo events - includes base properties for compatibility
 export type MatomoEvent = (
@@ -99,7 +99,7 @@ export type MatomoEvent = (
   | NoirCompilerEvent
   | ContractVerificationEvent
   | LearnethEvent
-
+  | QuickDappV2Event
 ) & {
   // Ensure all events have these base properties for backward compatibility
   name?: string;

libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx

@@ -15,6 +15,7 @@ import { BN } from 'bn.js'
 import { CustomTooltip, is0XPrefixed, isHexadecimal, isNumeric, shortenAddress } from '@remix-ui/helper'
 import { TrackingContext } from '@remix-ide/tracking'
 import { UdappEvent } from '@remix-api'
+import { trackMatomoEvent } from '@remix-api'
 
 const txHelper = remixLib.execution.txHelper
 
@@ -525,6 +526,12 @@ export function UniversalDappUI(props: UdappProps) {
 
 const generateAIDappWithPlugin = async (description: string, address: string, contractData: any, props: UdappProps) => {
   try {
+    trackMatomoEvent(this, {
+      category: 'quick-dapp-v2',
+      action: 'generate',
+      name: 'start',
+      isClick: false
+    })
     const pages: Record<string, string> = await props.plugin.call('ai-dapp-generator', 'generateDapp', {
       description,
       address,
@@ -572,7 +579,21 @@ const generateAIDappWithPlugin = async (description: string, address: string, co
       pages
     )
 
+    trackMatomoEvent(this, {
+      category: 'quick-dapp-v2',
+      action: 'generate',
+      name: 'success',
+      isClick: false
+    })
+
   } catch (error) {
+    trackMatomoEvent(this, {
+      category: 'quick-dapp-v2',
+      action: 'error',
+      name: 'generation_failed',
+      value: error.message,
+      isClick: false
+    })
     console.error('Error generating DApp:', error)
     await props.plugin.call('terminal', 'log', { type: 'error', value: error.message })
   }